@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/components/core/Carousel/Carousel.types.d.ts

@@ -1,113 +0,0 @@
-import { HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
-export type CarouselOrientation = 'horizontal' | 'vertical';
-export interface CarouselOptions {
-    /**
-     * Alignment of carousel items
-     * @default 'start'
-     */
-    align?: 'start' | 'center' | 'end';
-    /**
-     * Enable infinite looping
-     * @default false
-     */
-    loop?: boolean;
-    /**
-     * Number of slides to scroll at a time
-     * @default 1
-     */
-    slidesToScroll?: number;
-    /**
-     * Enable drag interaction
-     * @default true
-     */
-    draggable?: boolean;
-    /**
-     * Drag threshold for slide change (0-1)
-     * @default 0.1
-     */
-    dragThreshold?: number;
-}
-export interface CarouselContextValue {
-    currentIndex: number;
-    totalSlides: number;
-    scrollTo: (index: number) => void;
-    scrollPrev: () => void;
-    scrollNext: () => void;
-    canScrollPrev: boolean;
-    canScrollNext: boolean;
-    orientation: CarouselOrientation;
-    opts: CarouselOptions;
-}
-export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Carousel orientation
-     * @default 'horizontal'
-     */
-    orientation?: CarouselOrientation;
-    /**
-     * Carousel configuration options
-     */
-    opts?: CarouselOptions;
-    /**
-     * Whether to show default navigation controls
-     * @default false
-     */
-    showControls?: boolean;
-    /**
-     * Initial slide index
-     * @default 0
-     */
-    defaultIndex?: number;
-    /**
-     * Callback when slide changes
-     */
-    onSlideChange?: (index: number) => void;
-    /**
-     * Custom class name for the carousel container
-     */
-    className?: string;
-    /**
-     * Children components (CarouselBody, CarouselPrevious, CarouselNext)
-     */
-    children?: ReactNode;
-}
-export interface CarouselBodyProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Custom class name for the body container
-     */
-    className?: string;
-    /**
-     * Children components (CarouselItem)
-     */
-    children?: ReactNode;
-}
-export interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Custom class name for the item
-     */
-    className?: string;
-    /**
-     * Children content to display in the slide
-     */
-    children?: ReactNode;
-}
-export interface CarouselControlProps extends HTMLAttributes<HTMLButtonElement> {
-    /**
-     * Custom class name for the button
-     */
-    className?: string;
-    /**
-     * Custom icon to override default arrow
-     */
-    icon?: ReactNode;
-    /**
-     * Accessible label for the button
-     */
-    'aria-label'?: string;
-}
-export interface CarouselComponent extends ForwardRefExoticComponent<CarouselProps & RefAttributes<HTMLDivElement>> {
-    Body: ForwardRefExoticComponent<CarouselBodyProps & RefAttributes<HTMLDivElement>>;
-    Item: ForwardRefExoticComponent<CarouselItemProps & RefAttributes<HTMLDivElement>>;
-    Previous: ForwardRefExoticComponent<CarouselControlProps & RefAttributes<HTMLButtonElement>>;
-    Next: ForwardRefExoticComponent<CarouselControlProps & RefAttributes<HTMLButtonElement>>;
-}

package/dist/components/core/Carousel/CarouselBody.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { CarouselBodyProps } from './Carousel.types';
-declare const CarouselBody: React.ForwardRefExoticComponent<CarouselBodyProps & React.RefAttributes<HTMLDivElement>>;
-export { CarouselBody };

package/dist/components/core/Carousel/CarouselBody.js

@@ -1,59 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { useReducedMotion, motion } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-import { useCarouselContext } from './CarouselContext.js';
-import { carouselTheme } from './Carousel.theme.js';
-
-const CarouselBody = React__default.forwardRef(({ className, children, ...props }, ref) => {
-    const { currentIndex, orientation, opts, scrollPrev, scrollNext } = useCarouselContext();
-    const shouldReduceMotion = useReducedMotion();
-    const internalRef = React__default.useRef(null);
-    React__default.useImperativeHandle(ref, () => internalRef.current, []);
-    const isHorizontal = orientation === 'horizontal';
-    const translateValue = `${-currentIndex * 100}%`;
-    const handleDragEnd = (_event, info) => {
-        var _a;
-        if (!opts.draggable)
-            return;
-        const dragDistance = isHorizontal ? info.offset.x : info.offset.y;
-        const viewport = internalRef.current;
-        if (!viewport)
-            return;
-        const viewportSize = isHorizontal
-            ? viewport.offsetWidth
-            : viewport.offsetHeight;
-        const dragThreshold = viewportSize * ((_a = opts.dragThreshold) !== null && _a !== void 0 ? _a : 0.2);
-        if (Math.abs(dragDistance) > dragThreshold) {
-            if (dragDistance < 0) {
-                scrollNext();
-            }
-            else {
-                scrollPrev();
-            }
-        }
-    };
-    return (jsx("div", { ref: internalRef, className: cn(carouselTheme.viewport, className), ...props, children: jsx(motion.div, { className: cn(carouselTheme.container, isHorizontal ? 'flex-row' : 'flex-col'), drag: opts.draggable && (isHorizontal ? 'x' : 'y'), onDragEnd: handleDragEnd, dragElastic: 0.1, animate: {
-                x: isHorizontal ? translateValue : 0,
-                y: isHorizontal ? 0 : translateValue,
-            }, transition: shouldReduceMotion
-                ? { duration: 0 }
-                : { type: 'spring', stiffness: 180, damping: 25, mass: 0.7 }, children: React__default.Children.map(children, (child, index) => {
-                if (!React__default.isValidElement(child))
-                    return child;
-                const isActive = index === currentIndex;
-                return React__default.cloneElement(child, {
-                    'aria-hidden': !isActive,
-                    // inert removes all focusable descendants from tab order and hides
-                    // them from assistive technologies when the slide is not active.
-                    // Must be a genuine boolean — React 19 maps `inert` directly to the
-                    // DOM property, and passing the empty string is treated as `false`
-                    // (the attribute never lands on the element).
-                    inert: !isActive || undefined,
-                });
-            }) }) }));
-});
-CarouselBody.displayName = 'Carousel.Body';
-
-export { CarouselBody };

package/dist/components/core/Carousel/CarouselContext.d.ts

@@ -1,3 +0,0 @@
-import { CarouselContextValue } from './Carousel.types';
-export declare const CarouselContext: import("react").Context<CarouselContextValue | undefined>;
-export declare const useCarouselContext: () => CarouselContextValue;

package/dist/components/core/Carousel/CarouselContext.js

@@ -1,13 +0,0 @@
-"use client";
-import { createContext, useContext } from 'react';
-
-const CarouselContext = createContext(undefined);
-const useCarouselContext = () => {
-    const context = useContext(CarouselContext);
-    if (!context) {
-        throw new Error('Carousel compound components must be used within Carousel');
-    }
-    return context;
-};
-
-export { CarouselContext, useCarouselContext };

package/dist/components/core/Carousel/CarouselItem.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { CarouselItemProps } from './Carousel.types';
-declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>;
-export { CarouselItem };

package/dist/components/core/Carousel/CarouselItem.js

@@ -1,11 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
-import { carouselTheme } from './Carousel.theme.js';
-
-const CarouselItem = React__default.forwardRef(({ className, children, ...props }, ref) => {
-    return (jsx("div", { ref: ref, role: "group", "aria-roledescription": "slide", className: cn(carouselTheme.item, className), ...props, children: children }));
-});
-CarouselItem.displayName = 'Carousel.Item';
-
-export { CarouselItem };

package/dist/components/core/Carousel/CarouselNext.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { CarouselControlProps } from './Carousel.types';
-declare const CarouselNext: React.ForwardRefExoticComponent<CarouselControlProps & React.RefAttributes<HTMLButtonElement>>;
-export { CarouselNext };

package/dist/components/core/Carousel/CarouselNext.js

@@ -1,16 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
-import { cn } from '../../../utils/cn.js';
-import { useCarouselContext } from './CarouselContext.js';
-import { carouselTheme } from './Carousel.theme.js';
-
-const CarouselNext = React__default.forwardRef(({ className, icon, 'aria-label': ariaLabel, ...props }, ref) => {
-    const { scrollNext, canScrollNext, orientation } = useCarouselContext();
-    return (jsx("button", { ref: ref, type: "button", onClick: scrollNext, disabled: !canScrollNext, "aria-label": ariaLabel || 'Next slide', className: cn(carouselTheme.button, className), ...props, children: icon ||
-            (orientation === 'horizontal' ? (jsx(ChevronRightIcon, { className: carouselTheme.buttonIcon, "aria-hidden": "true" })) : (jsx(ChevronDownIcon, { className: carouselTheme.buttonIcon, "aria-hidden": "true" }))) }));
-});
-CarouselNext.displayName = 'Carousel.Next';
-
-export { CarouselNext };

package/dist/components/core/Carousel/CarouselPrevious.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { CarouselControlProps } from './Carousel.types';
-declare const CarouselPrevious: React.ForwardRefExoticComponent<CarouselControlProps & React.RefAttributes<HTMLButtonElement>>;
-export { CarouselPrevious };

package/dist/components/core/Carousel/CarouselPrevious.js

@@ -1,16 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { ChevronLeftIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
-import { cn } from '../../../utils/cn.js';
-import { useCarouselContext } from './CarouselContext.js';
-import { carouselTheme } from './Carousel.theme.js';
-
-const CarouselPrevious = React__default.forwardRef(({ className, icon, 'aria-label': ariaLabel, ...props }, ref) => {
-    const { scrollPrev, canScrollPrev, orientation } = useCarouselContext();
-    return (jsx("button", { ref: ref, type: "button", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": ariaLabel || 'Previous slide', className: cn(carouselTheme.button, className), ...props, children: icon ||
-            (orientation === 'horizontal' ? (jsx(ChevronLeftIcon, { className: carouselTheme.buttonIcon, "aria-hidden": "true" })) : (jsx(ChevronUpIcon, { className: carouselTheme.buttonIcon, "aria-hidden": "true" }))) }));
-});
-CarouselPrevious.displayName = 'Carousel.Previous';
-
-export { CarouselPrevious };

package/dist/components/core/Carousel/index.d.ts

@@ -1,3 +0,0 @@
-export { Carousel } from './Carousel';
-export { CarouselBody } from './CarouselBody';
-export type { CarouselProps, CarouselBodyProps, CarouselItemProps, CarouselControlProps, CarouselOptions, CarouselOrientation, } from './Carousel.types';

package/dist/components/core/Pill/Pill.animations.d.ts

@@ -1,32 +0,0 @@
-import { Variants } from 'motion/react';
-/**
- * Animation variants for Pill component
- *
- * Reuses Badge's proven animation patterns with spring physics
- * for natural, responsive interactions.
- */
-/**
- * Main pill animation variants
- * Uses spring physics for smooth, natural motion
- */
-export declare const pillVariants: Variants;
-/**
- * Tap/click animation variant
- * Subtle scale down on press for tactile feedback
- */
-export declare const pillTapVariant: {
-    scale: number;
-    transition: {
-        duration: number;
-        type: "spring";
-        stiffness: number;
-        damping: number;
-    };
-};
-/**
- * Utility to check if animations should be enabled
- * Respects user's reduced-motion preference and Storybook environment
- *
- * @returns {boolean} True if animations should be enabled
- */
-export declare const getShouldAnimate: () => boolean;

package/dist/components/core/Pill/Pill.animations.js

@@ -1,16 +0,0 @@
-"use client";
-/**
- * Tap/click animation variant
- * Subtle scale down on press for tactile feedback
- */
-const pillTapVariant = {
-    scale: 0.975,
-    transition: {
-        duration: 0.1,
-        type: 'spring',
-        stiffness: 400,
-        damping: 10,
-    },
-};
-
-export { pillTapVariant };

package/dist/components/effects/ColorPanels/ColorPanels.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import type { ColorPanelsProps } from "./ColorPanels.types";
-/**
- * Animated perspective "venetian blind" color panels sweeping toward a
- * vanishing point. WebGL2-powered; falls back to a static CSS gradient when
- * WebGL2 is unavailable or the user prefers reduced motion.
- */
-export declare const ColorPanels: React.FC<ColorPanelsProps>;

package/dist/components/effects/ColorPanels/ColorPanels.js

@@ -1,66 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { useMemo, useRef } from 'react';
-import { useReducedMotion } from 'motion/react';
-import { useIsClient } from '../../../hooks/useIsClient.js';
-import { useDarkMode } from '../../../hooks/useDarkMode.js';
-import { cn } from '../../../utils/cn.js';
-import { ShaderCanvas } from '../shared/ShaderCanvas/ShaderCanvas.js';
-import { resolveShaderColors, resolveShaderColor } from '../shared/resolveShaderColor.js';
-import { colorPanelsFragmentShader } from './ColorPanels.shaders.js';
-import { COLOR_PANELS_MAX_COLORS } from './ColorPanels.types.js';
-
-const DEFAULT_COLORS = ["var(--color-primary-300)", "var(--color-primary)", "var(--color-primary-700)"];
-const DEFAULT_COLOR_BACK = "var(--color-background)";
-function useWebgl2Supported(disabled) {
-    return useMemo(() => {
-        if (disabled || typeof document === "undefined")
-            return false;
-        try {
-            return !!document.createElement("canvas").getContext("webgl2");
-        }
-        catch (_a) {
-            return false;
-        }
-    }, [disabled]);
-}
-/**
- * Animated perspective "venetian blind" color panels sweeping toward a
- * vanishing point. WebGL2-powered; falls back to a static CSS gradient when
- * WebGL2 is unavailable or the user prefers reduced motion.
- */
-const ColorPanels = ({ colors = DEFAULT_COLORS, colorBack = DEFAULT_COLOR_BACK, angle1 = 0.3, angle2 = 0.3, length = 1, edges = false, blur = 0.3, fadeIn = 0.3, fadeOut = 0.3, density = 0.5, gradient = 0.2, speed = 1, className, style, ...props }) => {
-    var _a, _b;
-    const isClient = useIsClient();
-    const shouldReduceMotion = useReducedMotion();
-    const isDark = useDarkMode();
-    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
-    const safeColors = colors.length > 0 ? colors.slice(0, COLOR_PANELS_MAX_COLORS) : DEFAULT_COLORS;
-    const resolvedColors = useMemo(() => resolveShaderColors(safeColors), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [safeColors.join("|"), isDark]);
-    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [colorBack, isDark]);
-    const uniformsRef = useRef({});
-    for (let i = 0; i < COLOR_PANELS_MAX_COLORS; i++) {
-        uniformsRef.current[`u_colors[${i}]`] =
-            (_b = (_a = resolvedColors[i]) !== null && _a !== void 0 ? _a : resolvedColors[resolvedColors.length - 1]) !== null && _b !== void 0 ? _b : [0, 0, 0, 0];
-    }
-    uniformsRef.current.u_colorsCount = resolvedColors.length;
-    uniformsRef.current.u_colorBack = resolvedBack;
-    uniformsRef.current.u_angle1 = angle1;
-    uniformsRef.current.u_angle2 = angle2;
-    uniformsRef.current.u_length = length;
-    uniformsRef.current.u_edges = edges ? 1 : 0;
-    uniformsRef.current.u_blur = blur;
-    uniformsRef.current.u_fadeIn = fadeIn;
-    uniformsRef.current.u_fadeOut = fadeOut;
-    uniformsRef.current.u_density = density;
-    uniformsRef.current.u_gradient = gradient;
-    uniformsRef.current.u_speed = speed;
-    const fallbackGradient = `linear-gradient(100deg, ${safeColors.join(", ")}, ${colorBack})`;
-    return (jsx("div", { className: cn("absolute inset-0 overflow-hidden pointer-events-none select-none", className), style: style, "aria-hidden": "true", ...props, children: isClient && webglSupported ? (jsx(ShaderCanvas, { fragmentShader: colorPanelsFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
-};
-
-export { ColorPanels };

package/dist/components/effects/ColorPanels/ColorPanels.shaders.d.ts

@@ -1,12 +0,0 @@
-/**
- * ColorPanels fragment shader — adapted from paper-design/shaders'
- * `color-panels.ts` (https://github.com/paper-design/shaders, Apache License
- * 2.0).
- *
- * Simplified from the original: plain centered/aspect-corrected UV
- * (gl_FragCoord/iResolution) instead of paper-design's ShaderSizingParams
- * fit/scale/rotation engine — the `u_scale` uniform that engine supplied
- * (used only for an anti-aliasing threshold) is hardcoded to 1.0 here since
- * there's no external scale/zoom control in this port.
- */
-export declare const colorPanelsFragmentShader = "#version 300 es\nprecision lowp float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colors[7];\nuniform float u_colorsCount;\nuniform vec4 u_colorBack;\nuniform float u_density;\nuniform float u_angle1;\nuniform float u_angle2;\nuniform float u_length;\nuniform float u_edges;\nuniform float u_blur;\nuniform float u_fadeIn;\nuniform float u_fadeOut;\nuniform float u_gradient;\nuniform float u_speed;\n\nout vec4 fragColor;\n\n\nconst float PI = 3.14159265359;\nconst float TWO_PI = 6.28318530718;\n\n\nconst float zLimit = .5;\nconst float SCALE = 1.0;\n\nvec2 getPanel(float angle, vec2 uv, float invLength, float aa) {\n  float sinA = sin(angle);\n  float cosA = cos(angle);\n\n  float denom = sinA - uv.y * cosA;\n  if (abs(denom) < .01) return vec2(0.);\n\n  float z = uv.y / denom;\n\n  if (z <= 0. || z > zLimit) return vec2(0.);\n\n  float zRatio = z / zLimit;\n  float panelMap = 1. - zRatio;\n  float x = uv.x * (cosA * z + 1.) * invLength;\n\n  float zOffset = zRatio - .5;\n  float left = -.5 + zOffset * u_angle1;\n  float right = .5 - zOffset * u_angle2;\n  float blurX = aa + 2. * panelMap * u_blur;\n\n  float leftEdge1 = left - blurX;\n  float leftEdge2 = left + .25 * blurX;\n  float rightEdge1 = right - .25 * blurX;\n  float rightEdge2 = right + blurX;\n\n  float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));\n  panel *= mix(0., panel, smoothstep(0., .01 / max(SCALE, 1e-6), panelMap));\n\n  float midScreen = abs(sinA);\n  if (u_edges > 0.5) {\n    panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0));\n  } else if (midScreen < .07) {\n    panel *= (midScreen * 15.);\n  }\n\n  return vec2(panel, panelMap);\n}\n\nvec4 blendColor(vec4 colorA, float panelMask, float panelMap) {\n  float fade = 1. - smoothstep(.97 - .97 * u_fadeIn, 1., panelMap);\n  fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap);\n\n  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);\n  float blendedAlpha = mix(0., colorA.a, fade);\n\n  return vec4(blendedRGB, blendedAlpha) * panelMask;\n}\n\nvoid main() {\n  vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n  uv *= 1.25;\n\n  float t = .02 * u_speed * iTime;\n  t = fract(t);\n  bool reverseTime = (t < 0.5);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n\n  float aa = .005 / SCALE;\n  int colorsCount = int(u_colorsCount);\n\n  vec4 premultipliedColors[7];\n  for (int i = 0; i < 7; i++) {\n    if (i >= colorsCount) break;\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    premultipliedColors[i] = c;\n  }\n\n  float invLength = 1.5 / max(u_length, .001);\n\n  int panelsNumber = 12;\n  float densityNormalizer = 1.;\n  if (colorsCount == 4) {\n    panelsNumber = 16;\n    densityNormalizer = 1.34;\n  } else if (colorsCount == 5) {\n    panelsNumber = 20;\n    densityNormalizer = 1.67;\n  } else if (colorsCount == 7) {\n    panelsNumber = 14;\n    densityNormalizer = 1.17;\n  }\n\n  float fPanelsNumber = float(panelsNumber);\n  float panelGrad = 1. - clamp(u_gradient, 0., 1.);\n\n  for (int set = 0; set < 2; set++) {\n    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);\n    if (!isForward) continue;\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 1) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(t + offset);\n      float angleNorm = densityFract / u_density;\n      if (densityFract >= .5 || angleNorm >= .3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      if (angleNorm > .5) {\n        angleNorm = 0.5;\n      }\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\n      if (panel[0] <= .001) continue;\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      float panelMap = panel[1];\n\n      int colorIdx = idx % colorsCount;\n      int nextColorIdx = (idx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 0) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(-t + offset);\n      float angleNorm = -densityFract / u_density;\n      if (densityFract >= .5 || angleNorm < -.3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      if (panelMask <= .001) continue;\n      float panelMap = panel[1];\n\n      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;\n      if (colorIdx < 0) colorIdx += colorsCount;\n      int nextColorIdx = (colorIdx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n  }\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n";

package/dist/components/effects/ColorPanels/ColorPanels.shaders.js

@@ -1,218 +0,0 @@
-import 'react/jsx-runtime';
-import 'react';
-import { glslDeclarePI } from '../shared/shaderNoise.glsl.js';
-
-/**
- * ColorPanels fragment shader — adapted from paper-design/shaders'
- * `color-panels.ts` (https://github.com/paper-design/shaders, Apache License
- * 2.0).
- *
- * Simplified from the original: plain centered/aspect-corrected UV
- * (gl_FragCoord/iResolution) instead of paper-design's ShaderSizingParams
- * fit/scale/rotation engine — the `u_scale` uniform that engine supplied
- * (used only for an anti-aliasing threshold) is hardcoded to 1.0 here since
- * there's no external scale/zoom control in this port.
- */
-const colorPanelsFragmentShader = `#version 300 es
-precision lowp float;
-
-uniform float iTime;
-uniform vec2 iResolution;
-
-uniform vec4 u_colors[7];
-uniform float u_colorsCount;
-uniform vec4 u_colorBack;
-uniform float u_density;
-uniform float u_angle1;
-uniform float u_angle2;
-uniform float u_length;
-uniform float u_edges;
-uniform float u_blur;
-uniform float u_fadeIn;
-uniform float u_fadeOut;
-uniform float u_gradient;
-uniform float u_speed;
-
-out vec4 fragColor;
-
-${glslDeclarePI}
-
-const float zLimit = .5;
-const float SCALE = 1.0;
-
-vec2 getPanel(float angle, vec2 uv, float invLength, float aa) {
-  float sinA = sin(angle);
-  float cosA = cos(angle);
-
-  float denom = sinA - uv.y * cosA;
-  if (abs(denom) < .01) return vec2(0.);
-
-  float z = uv.y / denom;
-
-  if (z <= 0. || z > zLimit) return vec2(0.);
-
-  float zRatio = z / zLimit;
-  float panelMap = 1. - zRatio;
-  float x = uv.x * (cosA * z + 1.) * invLength;
-
-  float zOffset = zRatio - .5;
-  float left = -.5 + zOffset * u_angle1;
-  float right = .5 - zOffset * u_angle2;
-  float blurX = aa + 2. * panelMap * u_blur;
-
-  float leftEdge1 = left - blurX;
-  float leftEdge2 = left + .25 * blurX;
-  float rightEdge1 = right - .25 * blurX;
-  float rightEdge2 = right + blurX;
-
-  float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));
-  panel *= mix(0., panel, smoothstep(0., .01 / max(SCALE, 1e-6), panelMap));
-
-  float midScreen = abs(sinA);
-  if (u_edges > 0.5) {
-    panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0));
-  } else if (midScreen < .07) {
-    panel *= (midScreen * 15.);
-  }
-
-  return vec2(panel, panelMap);
-}
-
-vec4 blendColor(vec4 colorA, float panelMask, float panelMap) {
-  float fade = 1. - smoothstep(.97 - .97 * u_fadeIn, 1., panelMap);
-  fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap);
-
-  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);
-  float blendedAlpha = mix(0., colorA.a, fade);
-
-  return vec4(blendedRGB, blendedAlpha) * panelMask;
-}
-
-void main() {
-  vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
-  uv *= 1.25;
-
-  float t = .02 * u_speed * iTime;
-  t = fract(t);
-  bool reverseTime = (t < 0.5);
-
-  vec3 color = vec3(0.);
-  float opacity = 0.;
-
-  float aa = .005 / SCALE;
-  int colorsCount = int(u_colorsCount);
-
-  vec4 premultipliedColors[7];
-  for (int i = 0; i < 7; i++) {
-    if (i >= colorsCount) break;
-    vec4 c = u_colors[i];
-    c.rgb *= c.a;
-    premultipliedColors[i] = c;
-  }
-
-  float invLength = 1.5 / max(u_length, .001);
-
-  int panelsNumber = 12;
-  float densityNormalizer = 1.;
-  if (colorsCount == 4) {
-    panelsNumber = 16;
-    densityNormalizer = 1.34;
-  } else if (colorsCount == 5) {
-    panelsNumber = 20;
-    densityNormalizer = 1.67;
-  } else if (colorsCount == 7) {
-    panelsNumber = 14;
-    densityNormalizer = 1.17;
-  }
-
-  float fPanelsNumber = float(panelsNumber);
-  float panelGrad = 1. - clamp(u_gradient, 0., 1.);
-
-  for (int set = 0; set < 2; set++) {
-    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);
-    if (!isForward) continue;
-
-    for (int i = 0; i <= 20; i++) {
-      if (i >= panelsNumber) break;
-
-      int idx = panelsNumber - 1 - i;
-
-      float offset = float(idx) / fPanelsNumber;
-      if (set == 1) {
-        offset += .5;
-      }
-
-      float densityFract = densityNormalizer * fract(t + offset);
-      float angleNorm = densityFract / u_density;
-      if (densityFract >= .5 || angleNorm >= .3) continue;
-
-      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
-      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);
-      if (smoothDensity * smoothAngle < .001) continue;
-
-      if (angleNorm > .5) {
-        angleNorm = 0.5;
-      }
-      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);
-      if (panel[0] <= .001) continue;
-      float panelMask = panel[0] * smoothDensity * smoothAngle;
-      float panelMap = panel[1];
-
-      int colorIdx = idx % colorsCount;
-      int nextColorIdx = (idx + 1) % colorsCount;
-
-      vec4 colorA = premultipliedColors[colorIdx];
-      vec4 colorB = premultipliedColors[nextColorIdx];
-
-      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
-      vec4 blended = blendColor(colorA, panelMask, panelMap);
-      color = blended.rgb + color * (1. - blended.a);
-      opacity = blended.a + opacity * (1. - blended.a);
-    }
-
-    for (int i = 0; i <= 20; i++) {
-      if (i >= panelsNumber) break;
-
-      int idx = panelsNumber - 1 - i;
-
-      float offset = float(idx) / fPanelsNumber;
-      if (set == 0) {
-        offset += .5;
-      }
-
-      float densityFract = densityNormalizer * fract(-t + offset);
-      float angleNorm = -densityFract / u_density;
-      if (densityFract >= .5 || angleNorm < -.3) continue;
-
-      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
-      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);
-      if (smoothDensity * smoothAngle < .001) continue;
-
-      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);
-      float panelMask = panel[0] * smoothDensity * smoothAngle;
-      if (panelMask <= .001) continue;
-      float panelMap = panel[1];
-
-      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;
-      if (colorIdx < 0) colorIdx += colorsCount;
-      int nextColorIdx = (colorIdx + 1) % colorsCount;
-
-      vec4 colorA = premultipliedColors[colorIdx];
-      vec4 colorB = premultipliedColors[nextColorIdx];
-
-      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
-      vec4 blended = blendColor(colorA, panelMask, panelMap);
-      color = blended.rgb + color * (1. - blended.a);
-      opacity = blended.a + opacity * (1. - blended.a);
-    }
-  }
-
-  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
-  color = color + bgColor * (1.0 - opacity);
-  opacity = opacity + u_colorBack.a * (1.0 - opacity);
-
-  fragColor = vec4(color, opacity);
-}
-`;
-
-export { colorPanelsFragmentShader };

package/dist/components/effects/ColorPanels/ColorPanels.types.d.ts

@@ -1,29 +0,0 @@
-import type React from "react";
-export declare const COLOR_PANELS_MAX_COLORS = 7;
-export interface ColorPanelsProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Panel colors, cycled around the perspective sweep, up to 7. Default: a 3-stop primary ramp. */
-    colors?: string[];
-    /** Background CSS color. Default: 'var(--color-background)'. */
-    colorBack?: string;
-    /** Left-edge perspective skew. Default: 0.3. */
-    angle1?: number;
-    /** Right-edge perspective skew. Default: 0.3. */
-    angle2?: number;
-    /** Panel length (inverse of how stretched panels appear). Default: 1. */
-    length?: number;
-    /** Sharpen panel edges toward the vanishing point. Default: false. */
-    edges?: boolean;
-    /** Panel edge blur/softness. Default: 0.3. */
-    blur?: number;
-    /** Fade-in strength near the near edge. Default: 0.3. */
-    fadeIn?: number;
-    /** Fade-out strength near the vanishing point. Default: 0.3. */
-    fadeOut?: number;
-    /** Panel spacing/frequency. Default: 0.5. */
-    density?: number;
-    /** Cross-panel color gradient blend, 0-1. Default: 0.2. */
-    gradient?: number;
-    /** Animation speed multiplier. Default: 1. */
-    speed?: number;
-    className?: string;
-}