@cliquify.me/elements-ui 8.0.3

package/dist/items/audio-bars/audio-utils.d.ts

@@ -0,0 +1,8 @@
+export declare const getRMS: (spectrum: number[]) => number;
+export declare const toDecibel: (v: number) => number;
+export declare const range: (v: number, min: number, max: number) => number;
+export declare const clamp: (v: number, min: number, max: number) => number;
+export declare const processAudioFftValue: (v: number, options: {
+    minDb?: number;
+    maxDb?: number;
+}) => number;

package/dist/items/audio-bars/bars-visualization.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties } from 'react';
+
+export declare const getBars: ({ totalWidth, itemWidth, frequencyData, maxDb, minDb }: {
+    totalWidth: number;
+    itemWidth: number;
+    frequencyData: number[];
+    maxDb?: number;
+    minDb?: number;
+}) => number[];
+interface BarsProps {
+    values: number[];
+    width?: number;
+    height?: number;
+    lineThickness?: number;
+    gapSize?: number;
+    roundness?: number;
+    placement?: "over" | "under" | "middle";
+    color?: CSSProperties["color"];
+    maxAmplitude?: number;
+}
+export declare const BarsVisualization: React.FC<Omit<BarsProps, "values"> & {
+    frequencyData: number[];
+    maxDb?: number;
+    minDb?: number;
+}>;
+export {};

package/dist/items/audio-bars/hill-audio-bars.d.ts

@@ -0,0 +1,7 @@
+import { IHillAudioBars } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../../base-sequence';
+
+export declare const HillBars: ({ item, options }: {
+    item: IHillAudioBars;
+    options: SequenceItemOptions;
+}) => import("react").JSX.Element;

package/dist/items/audio-bars/hill-visualization.d.ts

@@ -0,0 +1,20 @@
+import { default as React, CSSProperties } from 'react';
+
+interface HillsProps {
+    values: number[];
+    width?: number;
+    height?: number;
+    fillColor?: CSSProperties["fill"] | Array<CSSProperties["fill"]>;
+    strokeWidth?: number;
+    strokeColor?: CSSProperties["stroke"] | Array<CSSProperties["stroke"]>;
+    blendMode?: CSSProperties["mixBlendMode"];
+    placement?: "over" | "under" | "middle";
+    copies?: number;
+}
+export declare const Hills: React.FC<HillsProps>;
+export declare const HillsVisualization: React.FC<Omit<HillsProps, "values"> & {
+    frequencyData: number[];
+    maxDb?: number;
+    minDb?: number;
+}>;
+export {};

package/dist/items/audio-bars/lineal-audio-bars.d.ts

@@ -0,0 +1,7 @@
+import { ILinealAudioBars } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../../base-sequence';
+
+export declare const LinealBars: ({ item, options }: {
+    item: ILinealAudioBars;
+    options: SequenceItemOptions;
+}) => import("react").JSX.Element;

package/dist/items/audio-bars/radial-audio-bars.d.ts

@@ -0,0 +1,7 @@
+import { IRadialAudioBars } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../../base-sequence';
+
+export declare const RadialBars: ({ item, options }: {
+    item: IRadialAudioBars;
+    options: SequenceItemOptions;
+}) => import("react").JSX.Element;

package/dist/items/audio-bars/radial-bars-visualization.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties } from 'react';
+
+interface BaseRadialBarsProps {
+    innerRadius: number;
+    lineThickness?: number;
+    barOrigin?: "outer" | "inner" | "middle";
+    roundness?: number;
+    color?: CSSProperties["color"];
+    maxAmplitude?: number;
+}
+interface RadialBarsProps extends BaseRadialBarsProps {
+    values: number[];
+    radius: number;
+}
+export declare const RadialBars: React.FC<RadialBarsProps>;
+interface RadialBarsVisualizationProps extends BaseRadialBarsProps {
+    frequencyData: number[];
+    maxDb?: number;
+    minDb?: number;
+    diameter: number;
+    gapSize?: number;
+}
+export declare const RadialBarsVisualization: React.FC<RadialBarsVisualizationProps>;
+export {};

package/dist/items/audio-bars/wave-audio-bars.d.ts

@@ -0,0 +1,7 @@
+import { IWaveAudioBars } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../../base-sequence';
+
+export declare const WaveBars: ({ item, options }: {
+    item: IWaveAudioBars;
+    options: SequenceItemOptions;
+}) => import("react").JSX.Element;

package/dist/items/audio-bars/wave-visualization.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+
+interface BaseWaveProps {
+    sections?: number;
+    width: number;
+    height: number;
+    lines?: number;
+    lineGap?: number;
+    lineColor?: string | string[];
+    lineThickness?: number;
+    topRoundness?: number;
+    bottomRoundness?: number;
+}
+interface WaveProps extends BaseWaveProps {
+    offsetPixels: number;
+    amplitude: number;
+}
+export declare const Wave: React.FC<WaveProps>;
+interface WaveVisualizationProps extends BaseWaveProps {
+    frequencyData: number[];
+    offsetPixelSpeed?: number;
+    maxDb?: number;
+    minDb?: number;
+}
+export declare const WaveVisualization: React.FC<WaveVisualizationProps>;
+export {};

package/dist/items/audio.d.ts

@@ -0,0 +1,7 @@
+import { IAudio } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export default function Audio({ item, options }: {
+    item: IAudio;
+    options: SequenceItemOptions;
+}): import("react").JSX.Element;

package/dist/items/caption.d.ts

@@ -0,0 +1,7 @@
+import { ICaption } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export default function Caption({ item, options }: {
+    item: ICaption;
+    options: SequenceItemOptions;
+}): import("react").JSX.Element;

package/dist/items/circle.d.ts

@@ -0,0 +1,8 @@
+import { ITrackItem } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export declare const Circle: ({ item, options }: {
+    item: ITrackItem;
+    options: SequenceItemOptions;
+}) => import("react").JSX.Element;
+export default Circle;

package/dist/items/composition.d.ts

@@ -0,0 +1,8 @@
+import { IComposition, ITrackItem } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export default function Composition({ item: itemComposition, options, renderSequenceItem }: {
+    item: IComposition;
+    options: SequenceItemOptions;
+    renderSequenceItem?: (item: ITrackItem, options: SequenceItemOptions) => React.ReactNode;
+}): import("react").JSX.Element;

package/dist/items/ellipse.d.ts

@@ -0,0 +1,8 @@
+import { IEllipse } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export declare const Ellipse: ({ item, options }: {
+    item: IEllipse;
+    options: SequenceItemOptions;
+}) => import("react").JSX.Element;
+export default Ellipse;

package/dist/items/hill-audio-bars.d.ts

@@ -0,0 +1,7 @@
+import { IHillAudioBars } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export default function HillAudioBars({ item, options }: {
+    item: IHillAudioBars;
+    options: SequenceItemOptions;
+}): import("react").JSX.Element;

package/dist/items/illustration.d.ts

@@ -0,0 +1,8 @@
+import { IIllustration } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export declare const Illustration: ({ item, options }: {
+    item: IIllustration;
+    options: SequenceItemOptions;
+}) => import("react").JSX.Element;
+export default Illustration;

package/dist/items/image.d.ts

@@ -0,0 +1,7 @@
+import { IImage } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export default function Image({ item, options }: {
+    item: IImage;
+    options: SequenceItemOptions;
+}): import("react").JSX.Element;

package/dist/items/index.d.ts

@@ -0,0 +1,19 @@
+export { default as Audio } from './audio';
+export { default as Caption } from './caption';
+export { default as Illustration } from './illustration';
+export { default as Image } from './image';
+export { default as Shape } from './shape';
+export { default as Text } from './text';
+export { default as Video } from './video';
+export { default as ProgressBar } from './progress-bar';
+export { default as LinealAudioBars } from './lineal-audio-bars';
+export { default as ProgressFrame } from './progress-frame';
+export { default as RadialAudioBars } from './radial-audio-bars';
+export { default as WaveAudioBars } from './wave-audio-bars';
+export { default as HillAudioBars } from './hill-audio-bars';
+export { default as Rect } from './rect';
+export { default as Circle } from './circle';
+export { default as Triangle } from './triangle';
+export { default as Star } from './star';
+export { default as Polygon } from './polygon';
+export { default as Ellipse } from './ellipse';

package/dist/items/lineal-audio-bars.d.ts

@@ -0,0 +1,7 @@
+import { ILinealAudioBars } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export default function LinealAudioBars({ item, options }: {
+    item: ILinealAudioBars;
+    options: SequenceItemOptions;
+}): import("react").JSX.Element;

package/dist/items/polygon.d.ts

@@ -0,0 +1,8 @@
+import { IPolygon } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export declare const Polygon: ({ item, options }: {
+    item: IPolygon;
+    options: SequenceItemOptions;
+}) => import("react").JSX.Element;
+export default Polygon;

package/dist/items/progress-bar.d.ts

@@ -0,0 +1,7 @@
+import { IProgressBar } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export default function ProgressBar({ item, options }: {
+    item: IProgressBar;
+    options: SequenceItemOptions;
+}): import("react").JSX.Element;

package/dist/items/progress-frame.d.ts

@@ -0,0 +1,7 @@
+import { IProgressFrame } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export default function ProgressFrame({ item, options }: {
+    item: IProgressFrame;
+    options: SequenceItemOptions;
+}): import("react").JSX.Element;

package/dist/items/progress-square.d.ts

@@ -0,0 +1,7 @@
+import { IProgressSquare } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export default function ProgressSquare({ item, options }: {
+    item: IProgressSquare;
+    options: SequenceItemOptions;
+}): import("react").JSX.Element;

package/dist/items/radial-audio-bars.d.ts

@@ -0,0 +1,7 @@
+import { IRadialAudioBars } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export default function RadialAudioBars({ item, options }: {
+    item: IRadialAudioBars;
+    options: SequenceItemOptions;
+}): import("react").JSX.Element;

package/dist/items/rect.d.ts

@@ -0,0 +1,8 @@
+import { IRect } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export declare const Rect: ({ item, options }: {
+    item: IRect;
+    options: SequenceItemOptions;
+}) => import("react").JSX.Element;
+export default Rect;

package/dist/items/shape.d.ts

@@ -0,0 +1,8 @@
+import { IShape } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export declare const Shape: ({ item, options }: {
+    item: IShape;
+    options: SequenceItemOptions;
+}) => import("react").JSX.Element;
+export default Shape;

package/dist/items/star.d.ts

@@ -0,0 +1,8 @@
+import { IStar } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export declare const Star: ({ item, options }: {
+    item: IStar;
+    options: SequenceItemOptions;
+}) => import("react").JSX.Element;
+export default Star;

package/dist/items/template.d.ts

@@ -0,0 +1,8 @@
+import { ITrackItem, ITemplate } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export default function Template({ item, options, renderSequenceItem }: {
+    item: ITemplate;
+    options: SequenceItemOptions;
+    renderSequenceItem?: (item: ITrackItem, options: SequenceItemOptions) => React.ReactNode;
+}): import("react").JSX.Element;

package/dist/items/text.d.ts

@@ -0,0 +1,7 @@
+import { IText } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export default function Text({ item, options }: {
+    item: IText;
+    options: SequenceItemOptions;
+}): import("react").JSX.Element;

package/dist/items/triangle.d.ts

@@ -0,0 +1,8 @@
+import { ITriangle } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export declare const Triangle: ({ item, options }: {
+    item: ITriangle;
+    options: SequenceItemOptions;
+}) => import("react").JSX.Element;
+export default Triangle;

package/dist/items/video.d.ts

@@ -0,0 +1,8 @@
+import { IVideo } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export declare const Video: ({ item, options }: {
+    item: IVideo;
+    options: SequenceItemOptions;
+}) => import("react").JSX.Element;
+export default Video;

package/dist/items/wave-audio-bars.d.ts

@@ -0,0 +1,7 @@
+import { IWaveAudioBars } from '@cliquify.me/types';
+import { SequenceItemOptions } from '../base-sequence';
+
+export default function WaveAudioBars({ item, options }: {
+    item: IWaveAudioBars;
+    options: SequenceItemOptions;
+}): import("react").JSX.Element;

package/dist/lib/audio-data.d.ts

@@ -0,0 +1,22 @@
+import { IAudio, ITrackItem, IVideo } from '@cliquify.me/types';
+
+export declare class AudioDataManager {
+    private fps;
+    private numberOfSamples;
+    dataBars: number[];
+    items: (ITrackItem & (IVideo | IAudio))[];
+    private audioDatas;
+    private readonly MAX_CACHE_SIZE;
+    private frameCache;
+    private readonly CACHE_TTL;
+    setAudioDataManager(fps: number): void;
+    private loadAudioData;
+    private cleanupCache;
+    setItems(items: (ITrackItem & (IVideo | IAudio))[]): Promise<void>;
+    validateUpdateItems(validateItems: (ITrackItem & (IVideo | IAudio))[]): void;
+    removeItem(id: string): void;
+    updateItem(newItem: ITrackItem & (IVideo | IAudio)): Promise<void>;
+    private combineValues;
+    getAudioDataForFrame(frame: number): number[];
+}
+export declare const audioDataManager: AudioDataManager;

package/dist/media-background.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+
+export declare const MediaBackground: ({ background, isTemplate, id, durationInFrames, size, style }: {
+    background: string;
+    isTemplate?: boolean;
+    id: string;
+    from: number;
+    durationInFrames: number;
+    zIndex?: number;
+    size: {
+        width: number;
+        height: number;
+    };
+    style?: CSSProperties;
+}) => import("react").JSX.Element | null;
+export default MediaBackground;

package/dist/motion-text.d.ts

@@ -0,0 +1,35 @@
+import { ICompositionAnimation, ITextDetails } from '@cliquify.me/types';
+
+declare const TextLayer: React.FC<{
+    id: string;
+    content: string;
+    onChange?: (id: string, content: string) => void;
+    onBlur?: (id: string, content: string) => void;
+    style?: React.CSSProperties;
+    editable?: boolean;
+    fps: number;
+    textAnimationNameIn: string;
+    textAnimationNameOut: string;
+    textAnimationNameLoop: string;
+    textAnimationModeIn: "all" | "word" | "letter" | "line";
+    textAnimationModeOut: "all" | "word" | "letter" | "line";
+    textAnimationModeLoop: "all" | "word" | "letter" | "line";
+    textAnimationModeTimed?: "all" | "word" | "letter" | "line";
+    basicCharAnimationsIn?: ICompositionAnimation[];
+    basicCharAnimationsOut?: ICompositionAnimation[];
+    basicCharAnimationsLoop?: ICompositionAnimation[];
+    basicCharAnimationsTimed?: ICompositionAnimation[];
+    loopComposition?: ICompositionAnimation[];
+    details: ITextDetails;
+    frame: number;
+    animationTextInFrames: number;
+    animationTextOutFrames: number;
+    animationTextLoopFrames: number;
+    animationTextTimedFrames?: number;
+    durationInFrames: number;
+    animationFonts: {
+        fontFamily: string;
+        url: string;
+    }[];
+}>;
+export default TextLayer;

package/dist/utils/effects-mapper.d.ts

@@ -0,0 +1,18 @@
+import { ITrackItem, RemotionEffectConfig } from '@cliquify.me/types';
+
+export declare function mapRemotionEffects(configs?: RemotionEffectConfig[]): ({
+    readonly definition: import('remotion').EffectDefinition<unknown, unknown>;
+    readonly effectKey: string;
+    readonly params: unknown;
+} & {
+    readonly memoized: false;
+})[] | undefined;
+export declare function getAnimatedRemotionEffects(detailsEffects?: RemotionEffectConfig[], animations?: ITrackItem["animations"], currentFrame?: number): RemotionEffectConfig[];
+export interface EffectsCssInfo {
+    filter: string;
+    overlays: Array<{
+        id: string;
+        style: React.CSSProperties;
+    }>;
+}
+export declare function getEffectsCssInfo(configs?: RemotionEffectConfig[]): EffectsCssInfo;

package/dist/utils/frames.d.ts

@@ -0,0 +1,7 @@
+export declare const calculateFrames: (display: {
+    from: number;
+    to: number;
+}, fps: number) => {
+    from: number;
+    durationInFrames: number;
+};

package/dist/utils/get-animations.d.ts

@@ -0,0 +1,15 @@
+import { IBasicAnimation, ITrackItem } from '@cliquify.me/types';
+import { Animation } from '@cliquify.me/animations';
+
+export type { Animation };
+export declare const getAnimations: (animation: {
+    in?: IBasicAnimation;
+    out?: IBasicAnimation;
+    loop?: IBasicAnimation;
+    timed?: IBasicAnimation;
+}, item: ITrackItem, frame?: number, fps?: number) => {
+    animationIn: Animation[] | null;
+    animationOut: Animation[] | null;
+    animationLoop: Animation[] | null;
+    animationTimed: Animation[] | null;
+};

package/dist/utils/safe-html-in-canvas.d.ts

@@ -0,0 +1,19 @@
+import { default as React, Component, ReactNode, ComponentProps } from 'react';
+import { HtmlInCanvas } from 'remotion';
+
+interface Props {
+    width: number;
+    height: number;
+    effects?: ComponentProps<typeof HtmlInCanvas>["effects"];
+    children: ReactNode;
+}
+interface State {
+    hasError: boolean;
+}
+export declare class SafeHtmlInCanvas extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(_: Error): State;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.JSX.Element;
+}
+export default SafeHtmlInCanvas;

package/dist/utils/styles.d.ts

@@ -0,0 +1,8 @@
+import { IImage, IText, ITrackItem } from '@cliquify.me/types';
+
+export declare const calculateCropStyles: (details: IImage["details"], crop: NonNullable<IImage["details"]["crop"]>) => React.CSSProperties;
+export declare const calculateMediaStyles: (details: ITrackItem["details"], crop: NonNullable<ITrackItem["details"]["crop"]>, overrides?: React.CSSProperties) => React.CSSProperties;
+export declare const calculateBorderOverlayStyles: (details: ITrackItem["details"], crop: NonNullable<ITrackItem["details"]["crop"]>) => React.CSSProperties;
+export declare const calculateTextStyles: (details: IText["details"]) => React.CSSProperties;
+export declare const calculateContainerStyles: (details: ITrackItem["details"], crop?: Partial<NonNullable<ITrackItem["details"]["crop"]>>, overrides?: React.CSSProperties) => React.CSSProperties;
+export declare const calculateContainerFigureStyles: (details: ITrackItem["details"], overrides?: React.CSSProperties) => React.CSSProperties;

package/dist/utils/track-items.d.ts

@@ -0,0 +1,9 @@
+import { ITrackItem, ITransition } from '@cliquify.me/types';
+
+type GroupElement = ITrackItem | ITransition;
+export declare const groupTrackItems: (data: {
+    trackItemIds: string[];
+    transitionsMap: Record<string, ITransition>;
+    trackItemsMap: Record<string, ITrackItem>;
+}) => GroupElement[][];
+export {};

package/dist/utils/use-current-frame.d.ts

@@ -0,0 +1,6 @@
+import { PlayerRef } from '@remotion/player';
+
+export declare const getSafeCurrentFrame: (playerRef: {
+    current?: PlayerRef;
+} | null) => number;
+export declare const useCurrentPlayerFrame: (ref: React.RefObject<PlayerRef> | null) => number;

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@cliquify.me/elements-ui",
+  "version": "8.0.3",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@remotion/effects": "4.0.506",
+    "@remotion/media-utils": "4.0.506",
+    "@remotion/player": "4.0.506",
+    "@remotion/shapes": "4.0.506",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.11.24",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "lodash": "^4.17.21",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "typescript": "^5.8.3",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1",
+    "@cliquify.me/typescript-config": "0.0.2"
+  },
+  "dependencies": {
+    "@cliquify.me/state": "8.0.3",
+    "@cliquify.me/types": "8.0.3",
+    "@cliquify.me/animations": "9.0.3",
+    "@cliquify.me/transitions": "0.11.9"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "remotion": "4.0.506",
+    "@cliquify.me/types": "8.0.3"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "format": "prettier --write ."
+  }
+}