@fluencypassdevs/cycle 1.6.0 → 1.9.0

package/dist/layout/container.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Container — wrapper centralizado com max-width e margin lateral.
+ *
+ * Margin (locked system value): 16px mobile / 24px desktop. Para casos especiais
+ * que pedem mais respiro (ex: conteudo luxuoso), use override via className: `sm:px-10`.
+ *
+ * O Container nao define gutter ou colunas — isso e responsabilidade do Grid interno.
+ */
+declare const containerVariants: (props?: ({
+    size?: "default" | "prose" | "wide" | "full" | null | undefined;
+    padding?: "none" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ContainerProps extends React.ComponentProps<"div">, VariantProps<typeof containerVariants> {
+    /** HTML element to render (default: div) */
+    as?: "div" | "section" | "main" | "article";
+}
+declare function Container({ size, padding, as, className, ...props }: ContainerProps): react_jsx_runtime.JSX.Element;
+
+export { Container, type ContainerProps, containerVariants };

package/dist/layout/container.js

@@ -0,0 +1,5 @@
+export { Container, containerVariants } from '../chunk-QANROH2K.js';
+import '../chunk-TYCPXAXF.js';
+import '../chunk-YINJ5YZ5.js';
+//# sourceMappingURL=container.js.map
+//# sourceMappingURL=container.js.map

package/dist/layout/container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"container.js"}

package/dist/layout/grid.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { C as ColCount } from '../types-CVdl5nka.js';
+
+interface GridProps extends React.ComponentProps<"div"> {
+    /**
+     * Auto-fit gallery: largura minima por item. Quando setado, sobrescreve
+     * o sistema 12-col padrao com `repeat(auto-fit, minmax(X, 1fr))`.
+     * Use para galerias uniformes onde nao se controla o numero de items por linha.
+     */
+    minItemWidth?: string;
+}
+declare function Grid({ minItemWidth, className, style, ...props }: GridProps): react_jsx_runtime.JSX.Element;
+interface GridItemProps extends React.ComponentProps<"div"> {
+    /** Quantas colunas (de 12) o item ocupa no mobile. Sem size, ocupa 1 col. */
+    size?: ColCount;
+    /** Cols em sm (>= 640px) */
+    sizeSm?: ColCount;
+    /** Cols em md (>= 768px) */
+    sizeMd?: ColCount;
+    /** Cols em lg (>= 1024px) */
+    sizeLg?: ColCount;
+}
+declare function GridItem({ size, sizeSm, sizeMd, sizeLg, className, ...props }: GridItemProps): react_jsx_runtime.JSX.Element;
+
+export { Grid, GridItem, type GridItemProps, type GridProps };

package/dist/layout/grid.js

@@ -0,0 +1,5 @@
+export { Grid, GridItem } from '../chunk-JRJBKPXW.js';
+import '../chunk-TYCPXAXF.js';
+import '../chunk-YINJ5YZ5.js';
+//# sourceMappingURL=grid.js.map
+//# sourceMappingURL=grid.js.map

package/dist/layout/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"grid.js"}

package/dist/layout/stack.d.ts

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { G as GapToken } from '../types-CVdl5nka.js';
+
+declare const DIRECTION: {
+    readonly col: "flex-col";
+    readonly row: "flex-row";
+};
+declare const DIRECTION_SM: {
+    readonly col: "sm:flex-col";
+    readonly row: "sm:flex-row";
+};
+declare const DIRECTION_LG: {
+    readonly col: "lg:flex-col";
+    readonly row: "lg:flex-row";
+};
+declare const ALIGN: {
+    readonly start: "items-start";
+    readonly center: "items-center";
+    readonly end: "items-end";
+    readonly stretch: "items-stretch";
+};
+declare const JUSTIFY: {
+    readonly start: "justify-start";
+    readonly center: "justify-center";
+    readonly end: "justify-end";
+    readonly between: "justify-between";
+};
+interface StackProps extends React.ComponentProps<"div"> {
+    /** Flex direction (default: col) */
+    direction?: keyof typeof DIRECTION;
+    /** Direction at sm breakpoint (>= 640px) */
+    directionSm?: keyof typeof DIRECTION_SM;
+    /** Direction at lg breakpoint (>= 1024px) */
+    directionLg?: keyof typeof DIRECTION_LG;
+    /** Gap between items (default: lg = 16px) */
+    gap?: GapToken;
+    /** Gap at sm breakpoint */
+    gapSm?: GapToken;
+    /** Cross-axis alignment */
+    align?: keyof typeof ALIGN;
+    /** Main-axis alignment */
+    justify?: keyof typeof JUSTIFY;
+}
+declare function Stack({ direction, directionSm, directionLg, gap, gapSm, align, justify, className, ...props }: StackProps): react_jsx_runtime.JSX.Element;
+
+export { Stack, type StackProps };

package/dist/layout/stack.js

@@ -0,0 +1,5 @@
+export { Stack } from '../chunk-I5A3CME4.js';
+import '../chunk-TYCPXAXF.js';
+import '../chunk-YINJ5YZ5.js';
+//# sourceMappingURL=stack.js.map
+//# sourceMappingURL=stack.js.map

package/dist/layout/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"stack.js"}

package/dist/types-CVdl5nka.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shared types for layout primitives (Container, Stack, Grid, GridItem).
+ */
+/** Semantic gap tokens — used by Stack only (Grid has locked gutter). Maps to Tailwind gap-1/2/3/4/6 (4/8/12/16/24 px) */
+type GapToken = "xs" | "sm" | "md" | "lg" | "xl";
+/** Allowed column count for GridItem `size` (1–12) — based on the locked 12-col grid */
+type ColCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export type { ColCount as C, GapToken as G };

package/dist/ui/chat-message.d.ts

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { LikeDislikeValue } from './like-dislike.js';
+
+declare const chatMessageVariants: (props?: ({
+    persona?: "user" | "system" | "ai" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ChatMessageProps extends Omit<React.ComponentProps<"div">, "content">, VariantProps<typeof chatMessageVariants> {
+    /** Quem enviou: AI (assistente), user (aluno), system (mensagem do sistema) */
+    persona: "ai" | "user" | "system";
+    /** Texto da mensagem (opcional se houver apenas audio) */
+    text?: string;
+    /** URL do audio — renderiza AudioPlayer dentro do bubble */
+    audioSrc?: string;
+    /** Avatar do user (so usado em persona="user") */
+    avatar?: string;
+    /** Nome do user para fallback do avatar */
+    author?: string;
+    /** Mostrar like/dislike inline (so faz sentido em persona="ai") */
+    showFeedback?: boolean;
+    /** Valor controlado do feedback */
+    feedbackValue?: LikeDislikeValue;
+    /** Callback quando feedback muda */
+    onFeedbackChange?: (value: LikeDislikeValue) => void;
+    /** Estado de loading: mostra typing indicator ("...") */
+    loading?: boolean;
+}
+interface ChatAudioProps extends React.ComponentProps<"div"> {
+    /** URL do audio */
+    src: string;
+    /**
+     * Variante visual:
+     * - `neutral`: container `bg-muted` (cinza claro) — usado em AI messages
+     * - `brand`: container `bg-accent` (rosa pastel) — usado em User messages
+     *   (requer wrapper `.theme-brand` no componente pai)
+     */
+    variant?: "neutral" | "brand";
+    /**
+     * Array de picos pre-calculados (valores 0-1). Quando fornecido, o componente
+     * usa direto sem analisar o audio. Util para SSR, performance ou audios sem CORS.
+     * Se nao fornecido, o componente analisa o audio automaticamente via Web Audio API.
+     */
+    peaks?: number[];
+    /**
+     * Numero de barras no waveform (default: 60).
+     * Ignorado se `peaks` for fornecido (usa o length do array).
+     * Reduzido de 100 → 60 para barras nao ficarem finas demais em containers menores.
+     */
+    barCount?: number;
+}
+declare function ChatAudio({ src, variant, peaks: providedPeaks, barCount, className, ...props }: ChatAudioProps): react_jsx_runtime.JSX.Element;
+
+declare function ChatMessage({ persona, text, audioSrc, avatar, author, showFeedback, feedbackValue, onFeedbackChange, loading, className, ...props }: ChatMessageProps): react_jsx_runtime.JSX.Element;
+
+export { ChatAudio, type ChatAudioProps, ChatMessage, type ChatMessageProps, chatMessageVariants };

package/dist/ui/chat-message.js

@@ -0,0 +1,11 @@
+export { ChatAudio, ChatMessage, chatMessageVariants } from '../chunk-YMWRR7ET.js';
+import '../chunk-F2XA2Z75.js';
+import '../chunk-JPEDYOV7.js';
+import '../chunk-V7M2NHUO.js';
+import '../chunk-MSLQRGSP.js';
+import '../chunk-5I4PGGLN.js';
+import '../chunk-JJETOZMI.js';
+import '../chunk-TYCPXAXF.js';
+import '../chunk-YINJ5YZ5.js';
+//# sourceMappingURL=chat-message.js.map
+//# sourceMappingURL=chat-message.js.map

package/dist/ui/chat-message.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chat-message.js"}

package/dist/ui/chat-panel.js

@@ -1,7 +1,7 @@
 export { ChatPanel } from '../chunk-L32AMI4K.js';
 import '../chunk-HZJRM5EK.js';
-import '../chunk-MSLQRGSP.js';
 import '../chunk-V7M2NHUO.js';
+import '../chunk-MSLQRGSP.js';
 import '../chunk-3LXU5C35.js';
 import '../chunk-5I4PGGLN.js';
 import '../chunk-TYCPXAXF.js';

package/dist/ui/live-waiting.js

@@ -1,6 +1,6 @@
-export { LiveWaiting } from '../chunk-PCLVQPIG.js';
-import '../chunk-MSLQRGSP.js';
+export { LiveWaiting } from '../chunk-L2DJS6PG.js';
 import '../chunk-V7M2NHUO.js';
+import '../chunk-MSLQRGSP.js';
 import '../chunk-W4GSXVJ2.js';
 import '../chunk-TYCPXAXF.js';
 import '../chunk-YINJ5YZ5.js';

package/dist/ui/message-bar.d.ts

@@ -0,0 +1,69 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * Estados visuais do MessageBar:
+ * - `default`: input texto + botao mic (estado inicial, sem texto digitado)
+ * - `audio-only`: apenas botao mic centralizado (modo so audio)
+ * - `active`: input texto com conteudo digitado + botao send
+ * - `disabled`: input desabilitado
+ * - `recording`: barra de gravacao (timer + waveform live + delete/pause/send)
+ * - `paused`: gravacao pausada (timer + waveform + play/delete/mic/send)
+ */
+type MessageBarState = "default" | "audio-only" | "active" | "disabled" | "recording" | "paused";
+interface MessageBarProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+    /** Estado visual do componente (controlado pelo consumer) */
+    state?: MessageBarState;
+    /** Valor do input de texto */
+    value?: string;
+    /** Callback ao digitar */
+    onChange?: (value: string) => void;
+    /** Callback ao enviar texto (Enter ou clique no botao send) */
+    onSendText?: (text: string) => void;
+    /** Inicia gravacao (consumer chama MediaRecorder.start) */
+    onStartRecording?: () => void;
+    /** Pausa gravacao */
+    onPauseRecording?: () => void;
+    /** Retoma gravacao */
+    onResumeRecording?: () => void;
+    /** Cancela/deleta gravacao */
+    onCancelRecording?: () => void;
+    /** Envia o audio gravado */
+    onSendAudio?: () => void;
+    /** Toggle play/pause do audio gravado durante o estado `paused` */
+    onTogglePlay?: () => void;
+    /** Duracao da gravacao em segundos (controlado pelo consumer) */
+    recordingDuration?: number;
+    /** Indica se esta tocando o audio (durante state=paused) */
+    isPlaying?: boolean;
+    /**
+     * MediaStream do microfone (durante state=recording). Quando fornecido,
+     * o componente analisa em tempo real e renderiza as barras conforme a voz.
+     * Sem stream → fallback para waveform decorativo.
+     *
+     * Como usar:
+     * ```ts
+     * const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+     * const recorder = new MediaRecorder(stream)
+     * // Passa o MESMO stream pro MessageBar:
+     * <MessageBar state="recording" recordingStream={stream} ... />
+     * ```
+     */
+    recordingStream?: MediaStream | null;
+    /**
+     * Progresso do playback do audio gravado (0-1), usado durante state=paused.
+     * Quando fornecido, o waveform mostra barras tocadas/nao tocadas + dot verde
+     * sincronizado. Sem isso, o waveform mostra todas as barras como nao tocadas.
+     */
+    playbackProgress?: number;
+    /**
+     * Callback ao clicar/arrastar no waveform durante state=paused.
+     * Recebe o novo progresso (0-1); o consumer deve setar currentTime do audio.
+     */
+    onSeekPlayback?: (progress: number) => void;
+    /** Placeholder do input */
+    placeholder?: string;
+}
+declare function MessageBar({ state, value, onChange, onSendText, onStartRecording, onPauseRecording, onResumeRecording, onCancelRecording, onSendAudio, onTogglePlay, recordingDuration, isPlaying, recordingStream, playbackProgress, onSeekPlayback, placeholder, className, ...props }: MessageBarProps): react_jsx_runtime.JSX.Element;
+
+export { MessageBar, type MessageBarProps, type MessageBarState };

package/dist/ui/message-bar.js

@@ -0,0 +1,5 @@
+export { MessageBar } from '../chunk-PW464XEP.js';
+import '../chunk-TYCPXAXF.js';
+import '../chunk-YINJ5YZ5.js';
+//# sourceMappingURL=message-bar.js.map
+//# sourceMappingURL=message-bar.js.map

package/dist/ui/message-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"message-bar.js"}

package/dist/ui/message-rating.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type MessageRatingValue = 1 | 2 | 3 | 4 | 5;
+interface RatingLabel {
+    emoji: string;
+    title: string;
+    subtitle: string;
+}
+type MessageRatingLabels = Record<MessageRatingValue, RatingLabel>;
+interface MessageRatingProps extends Omit<React.ComponentProps<"div">, "onChange" | "defaultValue"> {
+    /** Valor selecionado (controlado) */
+    value?: MessageRatingValue | null;
+    /** Valor inicial (nao controlado) */
+    defaultValue?: MessageRatingValue | null;
+    /** Callback ao escolher uma opcao */
+    onChange?: (value: MessageRatingValue) => void;
+    /** Layout. "auto" usa vertical (column) abaixo de sm e horizontal acima */
+    layout?: "horizontal" | "vertical" | "auto";
+    /** Labels customizadas (default: PT-BR) */
+    labels?: Partial<MessageRatingLabels>;
+    /** Desabilita a interacao */
+    disabled?: boolean;
+    /** Titulo opcional acima das opcoes */
+    title?: string;
+}
+declare function MessageRating({ value: controlledValue, defaultValue, onChange, layout, labels: labelOverrides, disabled, title, className, ...props }: MessageRatingProps): react_jsx_runtime.JSX.Element;
+
+export { MessageRating, type MessageRatingLabels, type MessageRatingProps, type MessageRatingValue, type RatingLabel };

package/dist/ui/message-rating.js

@@ -0,0 +1,5 @@
+export { MessageRating } from '../chunk-37C2K2NM.js';
+import '../chunk-TYCPXAXF.js';
+import '../chunk-YINJ5YZ5.js';
+//# sourceMappingURL=message-rating.js.map
+//# sourceMappingURL=message-rating.js.map

package/dist/ui/message-rating.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"message-rating.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluencypassdevs/cycle",
-  "version": "1.6.0",
+  "version": "1.9.0",
   "description": "Cycle Design System — UI component library by Fluencypass",
   "license": "MIT",
   "repository": {