@chrono-os/image-editor-react 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,163 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { C as CropValue, b as ImagePickerProps, R as RecentColorsAdapter } from './badge-BRjFgV8X.js';
+export { B as BadgeData, a as BadgeOverlay, I as ImagePickerAspect, c as ImagePreset, U as UploadAdapter, d as UploadItem, e as UploadedImage } from './badge-BRjFgV8X.js';
+import 'react';
+
+/**
+ * Constrói valor CSS `filter` baseado nas opções. Idêntico ao helper do
+ * `@chrono-os/lp-react` — mantém preview e render em sincronia visual.
+ */
+declare function buildImageFilter(opts: {
+    grayscale?: number;
+    saturation?: number;
+    sepia?: number;
+    sepiaColor?: string;
+}): string | undefined;
+interface ImageCropPickerProps {
+    imageUrl: string;
+    /** Aspect ratio do destino (frame). Ex: 3/4, 16/9. */
+    targetAspect: number;
+    value: CropValue;
+    onChange: (next: CropValue) => void;
+    /**
+     * Limita a altura do painel do editor (em px). Quando ausente, usa
+     * `min(60vh, 520px)`. Use pra prevenir scroll quando o modal pai tem
+     * altura fixa.
+     */
+    maxHeight?: number;
+}
+declare const MIN_SCALE = 0.2;
+declare const MAX_SCALE = 5;
+/** Calcula a fração visível (cover) do source numa dimensão.
+ * source_wider: vw_base = target/img; source_taller: vw_base = 1. */
+declare function computeVisibleBase(imgAspect: number, targetAspect: number): {
+    vwBase: number;
+    vhBase: number;
+};
+/**
+ * Geometria explícita do <img> dentro de container relative+overflow-hidden
+ * com aspect ratio TARGET. focal = posição da imagem no container (0=left,
+ * 100=right, 50=centro). Mesma math do renderer em prod — paridade total.
+ */
+declare function buildImageGeometry(opts: {
+    imgAspect: number;
+    targetAspect: number;
+    focalX: number;
+    focalY: number;
+    scale: number;
+}): {
+    width: string;
+    height: string;
+    left: string;
+    top: string;
+    renderedW: number;
+    renderedH: number;
+};
+declare function parsePosition(raw: string | undefined): {
+    x: number;
+    y: number;
+};
+declare function formatPos(x: number, y: number): string;
+/**
+ * Converte um ponto focal (0-100, fração do source onde o "centro da visão"
+ * deve ficar) em valor de CSS object-position (0-100).
+ *
+ * `visible` é a fração do source visível naquela dimensão DEPOIS de cover
+ * crop + scale. Quando não há overflow (visible >= 1), object-position é
+ * irrelevante; devolve 50 como neutro.
+ */
+declare function focalToOp(focal: number, visible: number): number;
+/** Inverso de focalToOp: dado object-position, devolve o focal point. */
+declare function opToFocal(op: number, visible: number): number;
+declare function ImageCropPicker({ imageUrl, targetAspect, value, onChange, maxHeight, }: ImageCropPickerProps): react_jsx_runtime.JSX.Element | null;
+
+declare function ImagePicker({ value, onChange, uploadAdapter, label, hint, aspect, crop, onCropChange, badge, extraCards, presets, }: ImagePickerProps): react_jsx_runtime.JSX.Element;
+
+interface BadgePartState {
+    enabled?: boolean;
+    text?: string;
+    color?: string;
+    size?: number;
+    offsetX?: number;
+    offsetY?: number;
+}
+interface BadgeEditorCardProps {
+    /** Título do subcard (ex "Badge — Número"). */
+    title: string;
+    value: BadgePartState;
+    onChange: (next: BadgePartState) => void;
+    /** Cor default mostrada quando `value.color` é undefined. */
+    defaultColor: string;
+    /** Posição X default exibida no slider quando `value.offsetX` é undefined. */
+    defaultPosX: number;
+    /** Posição Y default exibida no slider quando `value.offsetY` é undefined. */
+    defaultPosY: number;
+    /** Label da checkbox de exibir. Default "Exibir". */
+    enabledLabel?: string;
+    /** Placeholder do campo Texto. */
+    textPlaceholder?: string;
+    /** Adapter opcional de cores recentes pro `<BadgePartControls>`. */
+    recentColors?: RecentColorsAdapter;
+    /** Kind de cor (default 'text'). */
+    recentKind?: string;
+    /** Sementes neutras pros swatches (default ['#FFFFFF', '#000000']). */
+    seedColors?: string[];
+    /** Min/max do slider de tamanho (% — default 50-500). */
+    sizeMin?: number;
+    sizeMax?: number;
+}
+declare function BadgeEditorCard({ title, value, onChange, defaultColor, defaultPosX, defaultPosY, enabledLabel, textPlaceholder, recentColors, recentKind, seedColors, sizeMin, sizeMax, }: BadgeEditorCardProps): react_jsx_runtime.JSX.Element;
+
+interface BadgePartControlsProps {
+    color: string | undefined;
+    defaultColor: string;
+    size: number | undefined;
+    offsetX: number | undefined;
+    offsetY: number | undefined;
+    defaultPosX: number;
+    defaultPosY: number;
+    onColorChange: (v: string | undefined) => void;
+    onSizeChange: (v: number | undefined) => void;
+    onOffsetXChange: (v: number | undefined) => void;
+    onOffsetYChange: (v: number | undefined) => void;
+    /** Adapter de cores recentes (opcional). Sem ele, sumir a linha "Recentes". */
+    recentColors?: RecentColorsAdapter;
+    /** Kind de cor pra integrar com o adapter (default 'text'). */
+    recentKind?: string;
+    /** Sementes neutras quando recentes acabam. Default: ['#FFFFFF', '#000000']. */
+    seedColors?: string[];
+    /** Min/max do slider de tamanho (% — default 50-500). */
+    sizeMin?: number;
+    sizeMax?: number;
+}
+declare function BadgePartControls({ color, defaultColor, size, offsetX, offsetY, defaultPosX, defaultPosY, onColorChange, onSizeChange, onOffsetXChange, onOffsetYChange, recentColors, recentKind, seedColors, sizeMin, sizeMax, }: BadgePartControlsProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Linha de slider padronizada usada nos controles do badge (Tamanho, Pos. X,
+ * Pos. Y). Garante mesma estrutura e larguras em todas as rows:
+ *
+ *   w-20 label · flex-1 range · w-12 valor · w-10 reset (ou spacer)
+ *
+ * O accent do range vem da CSS var `--ie-accent` (fallback `#556FFF`); o
+ * consumer overrida via tema (`@chrono-os/image-editor-react/theme.css` ou
+ * regra própria em `:root`/`.image-editor-root`).
+ */
+interface SliderRowProps {
+    label: string;
+    min: number;
+    max: number;
+    step: number;
+    /** Valor atual (undefined = usar `fallback` no render). */
+    value: number | undefined;
+    /** Valor exibido quando `value` é undefined. */
+    fallback: number;
+    /** Formatador do valor (ex `v => ${v}%`). */
+    format: (v: number) => string;
+    /** True quando o user mexeu (mostra botão `reset`). */
+    isCustom: boolean;
+    onChange: (v: number) => void;
+    onReset: () => void;
+}
+declare function SliderRow({ label, min, max, step, value, fallback, format, isCustom, onChange, onReset, }: SliderRowProps): react_jsx_runtime.JSX.Element;
+
+export { BadgeEditorCard, BadgePartControls, type BadgePartState, CropValue, ImageCropPicker, ImagePicker, ImagePickerProps, MAX_SCALE, MIN_SCALE, RecentColorsAdapter, SliderRow, buildImageFilter, buildImageGeometry, computeVisibleBase, focalToOp, formatPos, opToFocal, parsePosition };