@fluencypassdevs/cycle 1.10.0 → 1.15.0

package/dist/marketing/typography/hero-heading.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+type HeroHeadingTag = "h1" | "h2" | "div";
+interface HeroHeadingProps extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> {
+    /** Tag renderizada. Default `"h1"`. */
+    as?: HeroHeadingTag;
+    /** Alinhamento horizontal. Default `"left"`. */
+    align?: "left" | "center";
+}
+/**
+ * Titulo dramatico de hero — sizes grandes, weight bold, leading apertado
+ * (1.07) pra dar "punch" visual. Use no `<h1>` da primeira dobra de landings.
+ *
+ * @example
+ * <HeroHeading>
+ *   Acelere o ingles do seu time
+ * </HeroHeading>
+ *
+ * <HeroHeading align="center">
+ *   Aprenda <RotatingWord words={["rapido", "facil"]} /> com IA
+ * </HeroHeading>
+ */
+declare const HeroHeading: React.ForwardRefExoticComponent<HeroHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+
+export { HeroHeading, type HeroHeadingProps };

package/dist/marketing/typography/hero-heading.js

@@ -0,0 +1,5 @@
+export { HeroHeading } from '../../chunk-EACBYVLK.js';
+import '../../chunk-TYCPXAXF.js';
+import '../../chunk-YINJ5YZ5.js';
+//# sourceMappingURL=hero-heading.js.map
+//# sourceMappingURL=hero-heading.js.map

package/dist/marketing/typography/hero-heading.js.map

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

package/dist/marketing/typography/index.d.ts

@@ -0,0 +1,5 @@
+export { HeroHeading, HeroHeadingProps } from './hero-heading.js';
+export { SectionHeading, SectionHeadingProps } from './section-heading.js';
+export { SectionEyebrow, SectionEyebrowProps } from './section-eyebrow.js';
+export { SectionSubtitle, SectionSubtitleProps } from './section-subtitle.js';
+import 'react';

package/dist/marketing/typography/index.js

@@ -0,0 +1,8 @@
+export { HeroHeading } from '../../chunk-EACBYVLK.js';
+export { SectionHeading } from '../../chunk-6JH4YWWX.js';
+export { SectionEyebrow } from '../../chunk-VYHRNO77.js';
+export { SectionSubtitle } from '../../chunk-XHKFKLHD.js';
+import '../../chunk-TYCPXAXF.js';
+import '../../chunk-YINJ5YZ5.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/marketing/typography/index.js.map

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

package/dist/marketing/typography/section-eyebrow.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+type SectionEyebrowTag = "p" | "span" | "div";
+interface SectionEyebrowProps extends React.HTMLAttributes<HTMLElement> {
+    /** Tag renderizada. Default `"p"`. */
+    as?: SectionEyebrowTag;
+    /** Alinhamento. Default `"left"`. */
+    align?: "left" | "center";
+}
+/**
+ * Rotulo monospace acima do `SectionHeading` — funciona como "eyebrow" que
+ * categoriza a dobra (ex: "Nossa solucao", "Para empresas"). Tipografia
+ * conservadora pra nao competir com o heading principal.
+ *
+ * @example
+ * <SectionEyebrow align="center">Para empresas</SectionEyebrow>
+ * <SectionHeading>Acelere o ingles do seu time</SectionHeading>
+ */
+declare const SectionEyebrow: React.ForwardRefExoticComponent<SectionEyebrowProps & React.RefAttributes<HTMLElement>>;
+
+export { SectionEyebrow, type SectionEyebrowProps };

package/dist/marketing/typography/section-eyebrow.js

@@ -0,0 +1,5 @@
+export { SectionEyebrow } from '../../chunk-VYHRNO77.js';
+import '../../chunk-TYCPXAXF.js';
+import '../../chunk-YINJ5YZ5.js';
+//# sourceMappingURL=section-eyebrow.js.map
+//# sourceMappingURL=section-eyebrow.js.map

package/dist/marketing/typography/section-eyebrow.js.map

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

package/dist/marketing/typography/section-heading.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+type SectionHeadingTag = "h2" | "h3";
+interface SectionHeadingProps extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> {
+    /** Tag renderizada. Default `"h2"`. */
+    as?: SectionHeadingTag;
+    /**
+     * Peso/intencao visual:
+     * - `"light"` (default): `font-light` — elegante, usual em maioria das dobras.
+     * - `"bold"`: `font-bold` — impacto, usado em momentos de virada (quebra).
+     */
+    weight?: "light" | "bold";
+    /** Alinhamento. Default `"center"`. */
+    align?: "left" | "center";
+    /**
+     * Largura maxima do bloco de texto:
+     * - `"wide"` (default): `max-w-5xl` — usual centro/elegante.
+     * - `"prose"`: `max-w-3xl` — quando o titulo e mais conciso.
+     */
+    maxW?: "wide" | "prose";
+}
+/**
+ * Titulo de dobra de landing. Dois pesos principais (`light` elegante vs `bold`
+ * impacto). Pareie com `SectionEyebrow` acima e `SectionSubtitle` abaixo.
+ *
+ * @example
+ * <SectionHeading>
+ *   Conteudo, professores e <strong>tecnologia</strong> no mesmo lugar
+ * </SectionHeading>
+ *
+ * <SectionHeading weight="bold" align="left" maxW="prose">
+ *   Mude o jeito de aprender ingles
+ * </SectionHeading>
+ */
+declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+
+export { SectionHeading, type SectionHeadingProps };

package/dist/marketing/typography/section-heading.js

@@ -0,0 +1,5 @@
+export { SectionHeading } from '../../chunk-6JH4YWWX.js';
+import '../../chunk-TYCPXAXF.js';
+import '../../chunk-YINJ5YZ5.js';
+//# sourceMappingURL=section-heading.js.map
+//# sourceMappingURL=section-heading.js.map

package/dist/marketing/typography/section-heading.js.map

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

package/dist/marketing/typography/section-subtitle.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+interface SectionSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /** Alinhamento. Default `"center"`. */
+    align?: "left" | "center";
+}
+/**
+ * Body de apoio abaixo do `SectionHeading` — explica ou complementa o titulo
+ * em uma frase. Cor muted, leading relaxado, max-width que evita linhas longas.
+ *
+ * @example
+ * <SectionHeading>Nossa solucao em 3 passos</SectionHeading>
+ * <SectionSubtitle>
+ *   Do diagnostico ao certificado, num caminho desenhado pra resultado.
+ * </SectionSubtitle>
+ */
+declare const SectionSubtitle: React.ForwardRefExoticComponent<SectionSubtitleProps & React.RefAttributes<HTMLParagraphElement>>;
+
+export { SectionSubtitle, type SectionSubtitleProps };

package/dist/marketing/typography/section-subtitle.js

@@ -0,0 +1,5 @@
+export { SectionSubtitle } from '../../chunk-XHKFKLHD.js';
+import '../../chunk-TYCPXAXF.js';
+import '../../chunk-YINJ5YZ5.js';
+//# sourceMappingURL=section-subtitle.js.map
+//# sourceMappingURL=section-subtitle.js.map

package/dist/marketing/typography/section-subtitle.js.map

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

package/dist/styles/tokens.css

@@ -847,6 +847,198 @@
   border-radius: 0 !important;
 }
 
+/* ============================================================
+   Cycle Marketing — Camada 1 (motion utilities)
+   Consumido por componentes em `@fluencypassdevs/cycle/marketing/motion/*`.
+   Replicado de src/app/globals.css para que o CSS distribuido contenha
+   as classes utility (consumers que importam apenas `styles.css` precisam delas).
+   ============================================================ */
+
+:root {
+  --duration-fast: 180ms;
+  --duration-base: 320ms;
+  --duration-slow: 600ms;
+  --duration-reveal: 720ms;
+  --ease-out-reveal: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+.cycle-reveal {
+  opacity: 0;
+  transform: translateY(8px);
+  transition:
+    opacity var(--duration-reveal) var(--ease-out-reveal),
+    transform var(--duration-reveal) var(--ease-out-reveal);
+  will-change: opacity, transform;
+}
+
+.cycle-reveal.is-visible {
+  opacity: 1;
+  transform: none;
+}
+
+@keyframes cycle-fade-up {
+  from { opacity: 0; transform: translate3d(0, 12px, 0); }
+  to { opacity: 1; transform: translate3d(0, 0, 0); }
+}
+
+.stagger-child {
+  opacity: 0;
+}
+
+.stagger-revealed .stagger-child {
+  animation: cycle-fade-up 0.6s var(--ease-out-reveal) forwards;
+  animation-delay: calc(var(--stagger-index, 0) * var(--stagger-step-ms, 100ms));
+}
+
+@keyframes cycle-anchor-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(212, 85, 88, 0);
+    transform: translateY(0);
+  }
+  15% {
+    box-shadow: 0 0 0 0 rgba(212, 85, 88, 0.5);
+    transform: translateY(-3px);
+  }
+  100% {
+    box-shadow: 0 0 0 20px rgba(212, 85, 88, 0);
+    transform: translateY(0);
+  }
+}
+
+.anchor-target-pulse [data-anchor-pulse] {
+  animation: cycle-anchor-pulse 1.6s var(--ease-out-reveal);
+}
+
+.light-surface {
+  --background: #f5f5f5;
+  --foreground: oklch(0.18 0.01 250);
+  --card: #ffffff;
+  --card-foreground: oklch(0.18 0.01 250);
+  --popover: #ffffff;
+  --popover-foreground: oklch(0.18 0.01 250);
+  --primary: oklch(0.18 0.01 250);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.94 0.003 30);
+  --secondary-foreground: oklch(0.18 0.01 250);
+  --muted: oklch(0.94 0.003 30);
+  --muted-foreground: oklch(0.42 0.012 250);
+  --accent: oklch(0.94 0.003 30);
+  --accent-foreground: oklch(0.18 0.01 250);
+  --border: oklch(0.88 0.005 30);
+  --input: oklch(0.9 0.005 30);
+  --ring: oklch(0.55 0.015 250);
+
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cycle-reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  .stagger-child,
+  .stagger-revealed .stagger-child {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+  .anchor-target-pulse [data-anchor-pulse] {
+    animation: none;
+  }
+}
+
+/* ============================================================
+   Cycle Marketing — Camada 2a (Foundation visual)
+   Replicado de globals.css para que o CSS distribuido (styles.css)
+   contenha os tokens e utility classes consumidas pelos componentes
+   em `@fluencypassdevs/cycle/marketing/{layout,typography,effects}/*`.
+   ============================================================ */
+
+:root {
+  --brand-soft: #ed6a6d;
+  --brand-default: #d45558;
+  --brand-dark: #b3244f;
+  --brand-soft-light: #ffb0b2;
+
+  --gradient-brand-primary: linear-gradient(to bottom, var(--brand-soft), var(--brand-dark));
+  --gradient-brand-angled: linear-gradient(135deg, var(--brand-soft), var(--brand-default), var(--brand-dark));
+
+  --glow-brand-circle: radial-gradient(
+    ellipse 70% 80% at center,
+    rgba(237, 106, 109, 0.18),
+    rgba(179, 36, 79, 0.10) 45%,
+    transparent
+  );
+}
+
+.cycle-card-dark-glow {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    0 4px 16px rgba(237, 106, 109, 0.06),
+    0 24px 48px rgba(0, 0, 0, 0.45);
+  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
+}
+.cycle-card-dark-glow[data-interactive="true"]:hover {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 8px 32px rgba(237, 106, 109, 0.22),
+    0 40px 72px rgba(0, 0, 0, 0.55);
+  transform: translateY(-3px);
+}
+
+.cycle-circle-glow {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: var(--glow-brand-circle);
+  filter: blur(40px);
+  animation: cycle-circle-glow-pulse 4.5s ease-in-out infinite;
+}
+.cycle-circle-glow[data-size="sm"] { transform: scale(0.6); }
+.cycle-circle-glow[data-size="md"] { transform: scale(0.8); }
+.cycle-circle-glow[data-size="lg"] { transform: scale(1); }
+
+@keyframes cycle-circle-glow-pulse {
+  0%, 100% { opacity: 0.55; }
+  50%      { opacity: 1; }
+}
+
+.cycle-marquee {
+  overflow: hidden;
+  width: 100%;
+}
+.cycle-marquee-track {
+  display: flex;
+  width: max-content;
+  gap: var(--cycle-marquee-gap, 48px);
+  animation: cycle-marquee-x var(--cycle-marquee-duration, 40s) linear infinite;
+}
+.cycle-marquee-track[data-direction="right"] {
+  animation-direction: reverse;
+}
+.cycle-marquee[data-pause-on-hover="true"]:hover .cycle-marquee-track,
+.cycle-marquee[data-pause-on-hover="true"]:focus-within .cycle-marquee-track {
+  animation-play-state: paused;
+}
+
+@keyframes cycle-marquee-x {
+  from { transform: translateX(0); }
+  to { transform: translateX(calc(-50% - var(--cycle-marquee-gap, 48px) / 2)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cycle-card-dark-glow,
+  .cycle-card-dark-glow[data-interactive="true"]:hover {
+    transition: none;
+    transform: none;
+  }
+  .cycle-circle-glow { animation: none; }
+  .cycle-marquee-track { animation: none; }
+}
+
 @media (pointer: fine) {
   [data-media-player][data-layout='video']:not([data-fullscreen]) {
     border-radius: 16px !important;

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

@@ -10,9 +10,14 @@ declare const chatMessageVariants: (props?: ({
 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) */
+    /** Texto da mensagem. Convencao do produto:
+     *  - Em `persona="ai"` com `audioSrc`, o texto e o roteiro/legenda do audio TTS.
+     *  - Em `persona="user"` com `audioSrc`, o texto e a transcricao do audio (gerada por IA).
+     *  Em ambos os casos, aparece em bubble separada acima do audio. */
     text?: string;
-    /** URL do audio — renderiza AudioPlayer dentro do bubble */
+    /** URL do audio — renderiza AudioPlayer dentro do bubble. Convencao do produto:
+     *  toda msg da IA tem `text` + `audioSrc` (TTS) e toda msg do user com audio tem
+     *  `text` (transcricao). Garante acessibilidade (leitura + escuta) e busca no historico. */
     audioSrc?: string;
     /** Avatar do user (so usado em persona="user") */
     avatar?: string;

package/dist/ui/chat-message.js

@@ -1,4 +1,4 @@
-export { ChatAudio, ChatMessage, chatMessageVariants } from '../chunk-YMWRR7ET.js';
+export { ChatAudio, ChatMessage, chatMessageVariants } from '../chunk-CG7NXMBC.js';
 import '../chunk-F2XA2Z75.js';
 import '../chunk-JPEDYOV7.js';
 import '../chunk-V7M2NHUO.js';

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

@@ -63,7 +63,30 @@ interface MessageBarProps extends Omit<React.ComponentProps<"div">, "onChange">
     onSeekPlayback?: (progress: number) => void;
     /** Placeholder do input */
     placeholder?: string;
+    /**
+     * Limite de duracao da gravacao em segundos. Quando omitido, sem limite
+     * (comportamento default). Quando atingido, o componente dispara
+     * `onMaxDurationReached` UMA VEZ — o ChatThread usa esse callback pra auto-pausar;
+     * consumers diretos do MessageBar podem usar pra customizar.
+     */
+    maxRecordingDuration?: number;
+    /**
+     * Quantos segundos antes do limite ativar o warning visual
+     * (timer em vermelho + label "Xs restantes" abaixo). Default: 10.
+     * Ignorado se `maxRecordingDuration` nao for passado.
+     */
+    warnAtSecondsLeft?: number;
+    /**
+     * Callback disparado uma unica vez quando `recordingDuration` >= `maxRecordingDuration`.
+     * Reseta automaticamente quando o componente sai do estado `recording`.
+     */
+    onMaxDurationReached?: () => void;
+    /**
+     * Label do warning inline. Recebe quantos segundos restam, retorna string.
+     * Default pt-BR: `(s) => \`${s}s restantes\``.
+     */
+    secondsLeftLabel?: (secondsLeft: number) => 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;
+declare function MessageBar({ state, value, onChange, onSendText, onStartRecording, onPauseRecording, onResumeRecording, onCancelRecording, onSendAudio, onTogglePlay, recordingDuration, isPlaying, recordingStream, playbackProgress, onSeekPlayback, placeholder, maxRecordingDuration, warnAtSecondsLeft, onMaxDurationReached, secondsLeftLabel, className, ...props }: MessageBarProps): react_jsx_runtime.JSX.Element;
 
 export { MessageBar, type MessageBarProps, type MessageBarState };

package/dist/ui/message-bar.js

@@ -1,4 +1,4 @@
-export { MessageBar } from '../chunk-27PO7X4G.js';
+export { MessageBar } from '../chunk-CWMXYPWK.js';
 import '../chunk-TYCPXAXF.js';
 import '../chunk-YINJ5YZ5.js';
 //# sourceMappingURL=message-bar.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluencypassdevs/cycle",
-  "version": "1.10.0",
+  "version": "1.15.0",
   "description": "Cycle Design System — UI component library by Fluencypass",
   "license": "MIT",
   "repository": {
@@ -47,6 +47,42 @@
       "import": "./dist/lib/utils.js",
       "types": "./dist/lib/utils.d.ts"
     },
+    "./hooks/*": {
+      "import": "./dist/hooks/*.js",
+      "types": "./dist/hooks/*.d.ts"
+    },
+    "./marketing/motion": {
+      "import": "./dist/marketing/motion/index.js",
+      "types": "./dist/marketing/motion/index.d.ts"
+    },
+    "./marketing/motion/*": {
+      "import": "./dist/marketing/motion/*.js",
+      "types": "./dist/marketing/motion/*.d.ts"
+    },
+    "./marketing/layout": {
+      "import": "./dist/marketing/layout/index.js",
+      "types": "./dist/marketing/layout/index.d.ts"
+    },
+    "./marketing/layout/*": {
+      "import": "./dist/marketing/layout/*.js",
+      "types": "./dist/marketing/layout/*.d.ts"
+    },
+    "./marketing/typography": {
+      "import": "./dist/marketing/typography/index.js",
+      "types": "./dist/marketing/typography/index.d.ts"
+    },
+    "./marketing/typography/*": {
+      "import": "./dist/marketing/typography/*.js",
+      "types": "./dist/marketing/typography/*.d.ts"
+    },
+    "./marketing/effects": {
+      "import": "./dist/marketing/effects/index.js",
+      "types": "./dist/marketing/effects/index.d.ts"
+    },
+    "./marketing/effects/*": {
+      "import": "./dist/marketing/effects/*.js",
+      "types": "./dist/marketing/effects/*.d.ts"
+    },
     "./styles.css": "./dist/styles/tokens.css",
     "./tailwind-theme.css": "./dist/styles/tokens.css"
   },