@fluencypassdevs/cycle 1.13.0 → 1.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/bin/mcp.mjs +199 -0
  2. package/dist/chunk-5HPZCREI.js +55 -0
  3. package/dist/chunk-5HPZCREI.js.map +1 -0
  4. package/dist/chunk-6JH4YWWX.js +29 -0
  5. package/dist/chunk-6JH4YWWX.js.map +1 -0
  6. package/dist/chunk-7LH7PSQS.js +77 -0
  7. package/dist/chunk-7LH7PSQS.js.map +1 -0
  8. package/dist/chunk-EACBYVLK.js +29 -0
  9. package/dist/chunk-EACBYVLK.js.map +1 -0
  10. package/dist/chunk-HDCU6QSG.js +24 -0
  11. package/dist/chunk-HDCU6QSG.js.map +1 -0
  12. package/dist/chunk-K2NUBNSA.js +17 -0
  13. package/dist/chunk-K2NUBNSA.js.map +1 -0
  14. package/dist/chunk-NW56QDQM.js +64 -0
  15. package/dist/chunk-NW56QDQM.js.map +1 -0
  16. package/dist/chunk-NZXP7BAH.js +33 -0
  17. package/dist/chunk-NZXP7BAH.js.map +1 -0
  18. package/dist/chunk-TPRZMMT6.js +57 -0
  19. package/dist/chunk-TPRZMMT6.js.map +1 -0
  20. package/dist/chunk-UJ6OER6O.js +49 -0
  21. package/dist/chunk-UJ6OER6O.js.map +1 -0
  22. package/dist/chunk-VXWMC2NK.js +24 -0
  23. package/dist/chunk-VXWMC2NK.js.map +1 -0
  24. package/dist/chunk-VYHRNO77.js +27 -0
  25. package/dist/chunk-VYHRNO77.js.map +1 -0
  26. package/dist/chunk-XHKFKLHD.js +26 -0
  27. package/dist/chunk-XHKFKLHD.js.map +1 -0
  28. package/dist/chunk-XQUQDZVA.js +36 -0
  29. package/dist/chunk-XQUQDZVA.js.map +1 -0
  30. package/dist/hooks/use-intersection.d.ts +34 -0
  31. package/dist/hooks/use-intersection.js +4 -0
  32. package/dist/hooks/use-intersection.js.map +1 -0
  33. package/dist/hooks/use-reduced-motion.d.ts +11 -0
  34. package/dist/hooks/use-reduced-motion.js +4 -0
  35. package/dist/hooks/use-reduced-motion.js.map +1 -0
  36. package/dist/marketing/effects/card-dark-glow.d.ts +30 -0
  37. package/dist/marketing/effects/card-dark-glow.js +5 -0
  38. package/dist/marketing/effects/card-dark-glow.js.map +1 -0
  39. package/dist/marketing/effects/circle-glow.d.ts +26 -0
  40. package/dist/marketing/effects/circle-glow.js +5 -0
  41. package/dist/marketing/effects/circle-glow.js.map +1 -0
  42. package/dist/marketing/effects/index.d.ts +4 -0
  43. package/dist/marketing/effects/index.js +7 -0
  44. package/dist/marketing/effects/index.js.map +1 -0
  45. package/dist/marketing/effects/marquee.d.ts +30 -0
  46. package/dist/marketing/effects/marquee.js +5 -0
  47. package/dist/marketing/effects/marquee.js.map +1 -0
  48. package/dist/marketing/layout/index.d.ts +2 -0
  49. package/dist/marketing/layout/index.js +5 -0
  50. package/dist/marketing/layout/index.js.map +1 -0
  51. package/dist/marketing/layout/section.d.ts +36 -0
  52. package/dist/marketing/layout/section.js +5 -0
  53. package/dist/marketing/layout/section.js.map +1 -0
  54. package/dist/marketing/motion/animated-number.d.ts +35 -0
  55. package/dist/marketing/motion/animated-number.js +7 -0
  56. package/dist/marketing/motion/animated-number.js.map +1 -0
  57. package/dist/marketing/motion/index.d.ts +6 -0
  58. package/dist/marketing/motion/index.js +10 -0
  59. package/dist/marketing/motion/index.js.map +1 -0
  60. package/dist/marketing/motion/reveal-on-scroll.d.ts +27 -0
  61. package/dist/marketing/motion/reveal-on-scroll.js +7 -0
  62. package/dist/marketing/motion/reveal-on-scroll.js.map +1 -0
  63. package/dist/marketing/motion/smooth-anchor.d.ts +31 -0
  64. package/dist/marketing/motion/smooth-anchor.js +4 -0
  65. package/dist/marketing/motion/smooth-anchor.js.map +1 -0
  66. package/dist/marketing/motion/stagger-reveal.d.ts +30 -0
  67. package/dist/marketing/motion/stagger-reveal.js +7 -0
  68. package/dist/marketing/motion/stagger-reveal.js.map +1 -0
  69. package/dist/marketing/typography/hero-heading.d.ts +25 -0
  70. package/dist/marketing/typography/hero-heading.js +5 -0
  71. package/dist/marketing/typography/hero-heading.js.map +1 -0
  72. package/dist/marketing/typography/index.d.ts +5 -0
  73. package/dist/marketing/typography/index.js +8 -0
  74. package/dist/marketing/typography/index.js.map +1 -0
  75. package/dist/marketing/typography/section-eyebrow.d.ts +21 -0
  76. package/dist/marketing/typography/section-eyebrow.js +5 -0
  77. package/dist/marketing/typography/section-eyebrow.js.map +1 -0
  78. package/dist/marketing/typography/section-heading.d.ts +37 -0
  79. package/dist/marketing/typography/section-heading.js +5 -0
  80. package/dist/marketing/typography/section-heading.js.map +1 -0
  81. package/dist/marketing/typography/section-subtitle.d.ts +19 -0
  82. package/dist/marketing/typography/section-subtitle.js +5 -0
  83. package/dist/marketing/typography/section-subtitle.js.map +1 -0
  84. package/dist/styles/tokens.css +192 -0
  85. package/package.json +37 -1
package/dist/marketing/motion/reveal-on-scroll.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React from 'react';
3
+
4
+ type AsTag = "div" | "section" | "article" | "header" | "footer" | "main" | "aside";
5
+ interface RevealOnScrollProps extends React.HTMLAttributes<HTMLElement> {
6
+ /** Tag HTML renderizada. Default `"div"`. */
7
+ as?: AsTag;
8
+ /** Delay extra em ms antes de iniciar a animacao. Default `0`. */
9
+ delay?: number;
10
+ /** Fracao do elemento que precisa estar visivel pra disparar. Default `0.15`. */
11
+ threshold?: number;
12
+ /** Margin do viewport (CSS shorthand). Default `"0px 0px -10% 0px"`. */
13
+ rootMargin?: string;
14
+ /** Repetir a animacao toda vez que reentrar no viewport. Default `false`. */
15
+ repeat?: boolean;
16
+ }
17
+ /**
18
+ * Envelopa qualquer conteudo e aplica fade-up suave quando o elemento entra
19
+ * no viewport. Usa a utility `.cycle-reveal` definida em `globals.css` (que
20
+ * faz `opacity 0 → 1` e `translateY(8px → 0)` com `--duration-reveal`).
21
+ *
22
+ * Acessibilidade: respeita `prefers-reduced-motion` — quando habilitado,
23
+ * o conteudo fica imediatamente visivel sem transicao.
24
+ */
25
+ declare function RevealOnScroll({ as, delay, threshold, rootMargin, repeat, className, style, children, ...props }: RevealOnScrollProps): react_jsx_runtime.JSX.Element;
26
+
27
+ export { RevealOnScroll, type RevealOnScrollProps };
package/dist/marketing/motion/reveal-on-scroll.js ADDED
@@ -0,0 +1,7 @@
1
+ export { RevealOnScroll } from '../../chunk-UJ6OER6O.js';
2
+ import '../../chunk-K2NUBNSA.js';
3
+ import '../../chunk-XQUQDZVA.js';
4
+ import '../../chunk-TYCPXAXF.js';
5
+ import '../../chunk-YINJ5YZ5.js';
6
+ //# sourceMappingURL=reveal-on-scroll.js.map
7
+ //# sourceMappingURL=reveal-on-scroll.js.map
package/dist/marketing/motion/reveal-on-scroll.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"reveal-on-scroll.js"}
package/dist/marketing/motion/smooth-anchor.d.ts ADDED
@@ -0,0 +1,31 @@
1
+ interface SmoothAnchorProps {
2
+ /** Offset em px pra compensar header sticky. Default `96`. */
3
+ headerOffset?: number;
4
+ /** Duracao do scroll em ms. Default `900`. */
5
+ duration?: number;
6
+ }
7
+ /**
8
+ * Intercepta cliques em links de hash (`<a href="#algo">`) e faz scroll suave
9
+ * com easing `easeInOutCubic` em vez do `scroll-behavior: smooth` nativo
10
+ * (que tem duracao curta e easing fixo).
11
+ *
12
+ * Renderiza `null` (so registra listener global). Monte UMA VEZ por app,
13
+ * tipicamente no `<RootLayout>` ou na pagina raiz da landing.
14
+ *
15
+ * Comportamento:
16
+ * - Ignora clicks com modificadores (cmd/ctrl/middle-button).
17
+ * - Atualiza URL via `history.replaceState` sem disparar scroll nativo.
18
+ * - Adiciona classe `anchor-target-pulse` no destino apos chegar (animacao
19
+ * visual opcional, definida em `globals.css`).
20
+ * - Respeita `prefers-reduced-motion` (scroll instantaneo, sem easing).
21
+ *
22
+ * @example
23
+ * // app/layout.tsx
24
+ * <body>
25
+ * <SmoothAnchor headerOffset={64} />
26
+ * {children}
27
+ * </body>
28
+ */
29
+ declare function SmoothAnchor({ headerOffset, duration }: SmoothAnchorProps): null;
30
+
31
+ export { SmoothAnchor, type SmoothAnchorProps };
package/dist/marketing/motion/smooth-anchor.js ADDED
@@ -0,0 +1,4 @@
1
+ export { SmoothAnchor } from '../../chunk-NW56QDQM.js';
2
+ import '../../chunk-YINJ5YZ5.js';
3
+ //# sourceMappingURL=smooth-anchor.js.map
4
+ //# sourceMappingURL=smooth-anchor.js.map
package/dist/marketing/motion/smooth-anchor.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"smooth-anchor.js"}
package/dist/marketing/motion/stagger-reveal.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React from 'react';
3
+
4
+ interface StaggerRevealProps extends React.HTMLAttributes<HTMLDivElement> {
5
+ /** Delay entre cada filho em ms. Default `100`. */
6
+ step?: number;
7
+ /** Fracao do container que precisa estar visivel pra disparar. Default `0.15`. */
8
+ threshold?: number;
9
+ /** Margin do viewport (CSS shorthand). Default `"0px 0px -10% 0px"`. */
10
+ rootMargin?: string;
11
+ }
12
+ /**
13
+ * Container que anima seus filhos entrando em sequencia (fade-up com delay
14
+ * incremental). Clona cada filho valido e injeta `--stagger-index` como CSS
15
+ * variable; a animacao acontece via `.stagger-child` em `globals.css`.
16
+ *
17
+ * O `step` (default 100ms) controla o espacamento entre cada filho:
18
+ * - 1o filho: delay 0
19
+ * - 2o filho: delay 100ms
20
+ * - 3o filho: delay 200ms ...
21
+ *
22
+ * Note que o `step` so afeta visualmente quando o CSS usa
23
+ * `calc(var(--stagger-index) * Xms)` — atualmente o globals usa `100ms`
24
+ * fixo (o step prop sobrescreve via inline style se necessario).
25
+ *
26
+ * Acessibilidade: respeita `prefers-reduced-motion` — filhos ja entram visiveis.
27
+ */
28
+ declare function StaggerReveal({ step, threshold, rootMargin, className, children, ...props }: StaggerRevealProps): react_jsx_runtime.JSX.Element;
29
+
30
+ export { StaggerReveal, type StaggerRevealProps };
package/dist/marketing/motion/stagger-reveal.js ADDED
@@ -0,0 +1,7 @@
1
+ export { StaggerReveal } from '../../chunk-TPRZMMT6.js';
2
+ import '../../chunk-K2NUBNSA.js';
3
+ import '../../chunk-XQUQDZVA.js';
4
+ import '../../chunk-TYCPXAXF.js';
5
+ import '../../chunk-YINJ5YZ5.js';
6
+ //# sourceMappingURL=stagger-reveal.js.map
7
+ //# sourceMappingURL=stagger-reveal.js.map
package/dist/marketing/motion/stagger-reveal.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"stagger-reveal.js"}
package/dist/marketing/typography/hero-heading.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import * as React from 'react';
2
+
3
+ type HeroHeadingTag = "h1" | "h2" | "div";
4
+ interface HeroHeadingProps extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> {
5
+ /** Tag renderizada. Default `"h1"`. */
6
+ as?: HeroHeadingTag;
7
+ /** Alinhamento horizontal. Default `"left"`. */
8
+ align?: "left" | "center";
9
+ }
10
+ /**
11
+ * Titulo dramatico de hero — sizes grandes, weight bold, leading apertado
12
+ * (1.07) pra dar "punch" visual. Use no `<h1>` da primeira dobra de landings.
13
+ *
14
+ * @example
15
+ * <HeroHeading>
16
+ * Acelere o ingles do seu time
17
+ * </HeroHeading>
18
+ *
19
+ * <HeroHeading align="center">
20
+ * Aprenda <RotatingWord words={["rapido", "facil"]} /> com IA
21
+ * </HeroHeading>
22
+ */
23
+ declare const HeroHeading: React.ForwardRefExoticComponent<HeroHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
24
+
25
+ export { HeroHeading, type HeroHeadingProps };
package/dist/marketing/typography/hero-heading.js ADDED
@@ -0,0 +1,5 @@
1
+ export { HeroHeading } from '../../chunk-EACBYVLK.js';
2
+ import '../../chunk-TYCPXAXF.js';
3
+ import '../../chunk-YINJ5YZ5.js';
4
+ //# sourceMappingURL=hero-heading.js.map
5
+ //# sourceMappingURL=hero-heading.js.map
package/dist/marketing/typography/hero-heading.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"hero-heading.js"}
package/dist/marketing/typography/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export { HeroHeading, HeroHeadingProps } from './hero-heading.js';
2
+ export { SectionHeading, SectionHeadingProps } from './section-heading.js';
3
+ export { SectionEyebrow, SectionEyebrowProps } from './section-eyebrow.js';
4
+ export { SectionSubtitle, SectionSubtitleProps } from './section-subtitle.js';
5
+ import 'react';
package/dist/marketing/typography/index.js ADDED
@@ -0,0 +1,8 @@
1
+ export { HeroHeading } from '../../chunk-EACBYVLK.js';
2
+ export { SectionHeading } from '../../chunk-6JH4YWWX.js';
3
+ export { SectionEyebrow } from '../../chunk-VYHRNO77.js';
4
+ export { SectionSubtitle } from '../../chunk-XHKFKLHD.js';
5
+ import '../../chunk-TYCPXAXF.js';
6
+ import '../../chunk-YINJ5YZ5.js';
7
+ //# sourceMappingURL=index.js.map
8
+ //# sourceMappingURL=index.js.map
package/dist/marketing/typography/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
package/dist/marketing/typography/section-eyebrow.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import * as React from 'react';
2
+
3
+ type SectionEyebrowTag = "p" | "span" | "div";
4
+ interface SectionEyebrowProps extends React.HTMLAttributes<HTMLElement> {
5
+ /** Tag renderizada. Default `"p"`. */
6
+ as?: SectionEyebrowTag;
7
+ /** Alinhamento. Default `"left"`. */
8
+ align?: "left" | "center";
9
+ }
10
+ /**
11
+ * Rotulo monospace acima do `SectionHeading` — funciona como "eyebrow" que
12
+ * categoriza a dobra (ex: "Nossa solucao", "Para empresas"). Tipografia
13
+ * conservadora pra nao competir com o heading principal.
14
+ *
15
+ * @example
16
+ * <SectionEyebrow align="center">Para empresas</SectionEyebrow>
17
+ * <SectionHeading>Acelere o ingles do seu time</SectionHeading>
18
+ */
19
+ declare const SectionEyebrow: React.ForwardRefExoticComponent<SectionEyebrowProps & React.RefAttributes<HTMLElement>>;
20
+
21
+ export { SectionEyebrow, type SectionEyebrowProps };
package/dist/marketing/typography/section-eyebrow.js ADDED
@@ -0,0 +1,5 @@
1
+ export { SectionEyebrow } from '../../chunk-VYHRNO77.js';
2
+ import '../../chunk-TYCPXAXF.js';
3
+ import '../../chunk-YINJ5YZ5.js';
4
+ //# sourceMappingURL=section-eyebrow.js.map
5
+ //# sourceMappingURL=section-eyebrow.js.map
package/dist/marketing/typography/section-eyebrow.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"section-eyebrow.js"}
package/dist/marketing/typography/section-heading.d.ts ADDED
@@ -0,0 +1,37 @@
1
+ import * as React from 'react';
2
+
3
+ type SectionHeadingTag = "h2" | "h3";
4
+ interface SectionHeadingProps extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> {
5
+ /** Tag renderizada. Default `"h2"`. */
6
+ as?: SectionHeadingTag;
7
+ /**
8
+ * Peso/intencao visual:
9
+ * - `"light"` (default): `font-light` — elegante, usual em maioria das dobras.
10
+ * - `"bold"`: `font-bold` — impacto, usado em momentos de virada (quebra).
11
+ */
12
+ weight?: "light" | "bold";
13
+ /** Alinhamento. Default `"center"`. */
14
+ align?: "left" | "center";
15
+ /**
16
+ * Largura maxima do bloco de texto:
17
+ * - `"wide"` (default): `max-w-5xl` — usual centro/elegante.
18
+ * - `"prose"`: `max-w-3xl` — quando o titulo e mais conciso.
19
+ */
20
+ maxW?: "wide" | "prose";
21
+ }
22
+ /**
23
+ * Titulo de dobra de landing. Dois pesos principais (`light` elegante vs `bold`
24
+ * impacto). Pareie com `SectionEyebrow` acima e `SectionSubtitle` abaixo.
25
+ *
26
+ * @example
27
+ * <SectionHeading>
28
+ * Conteudo, professores e <strong>tecnologia</strong> no mesmo lugar
29
+ * </SectionHeading>
30
+ *
31
+ * <SectionHeading weight="bold" align="left" maxW="prose">
32
+ * Mude o jeito de aprender ingles
33
+ * </SectionHeading>
34
+ */
35
+ declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
36
+
37
+ export { SectionHeading, type SectionHeadingProps };
package/dist/marketing/typography/section-heading.js ADDED
@@ -0,0 +1,5 @@
1
+ export { SectionHeading } from '../../chunk-6JH4YWWX.js';
2
+ import '../../chunk-TYCPXAXF.js';
3
+ import '../../chunk-YINJ5YZ5.js';
4
+ //# sourceMappingURL=section-heading.js.map
5
+ //# sourceMappingURL=section-heading.js.map
package/dist/marketing/typography/section-heading.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"section-heading.js"}
package/dist/marketing/typography/section-subtitle.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import * as React from 'react';
2
+
3
+ interface SectionSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
4
+ /** Alinhamento. Default `"center"`. */
5
+ align?: "left" | "center";
6
+ }
7
+ /**
8
+ * Body de apoio abaixo do `SectionHeading` — explica ou complementa o titulo
9
+ * em uma frase. Cor muted, leading relaxado, max-width que evita linhas longas.
10
+ *
11
+ * @example
12
+ * <SectionHeading>Nossa solucao em 3 passos</SectionHeading>
13
+ * <SectionSubtitle>
14
+ * Do diagnostico ao certificado, num caminho desenhado pra resultado.
15
+ * </SectionSubtitle>
16
+ */
17
+ declare const SectionSubtitle: React.ForwardRefExoticComponent<SectionSubtitleProps & React.RefAttributes<HTMLParagraphElement>>;
18
+
19
+ export { SectionSubtitle, type SectionSubtitleProps };
package/dist/marketing/typography/section-subtitle.js ADDED
@@ -0,0 +1,5 @@
1
+ export { SectionSubtitle } from '../../chunk-XHKFKLHD.js';
2
+ import '../../chunk-TYCPXAXF.js';
3
+ import '../../chunk-YINJ5YZ5.js';
4
+ //# sourceMappingURL=section-subtitle.js.map
5
+ //# sourceMappingURL=section-subtitle.js.map
package/dist/marketing/typography/section-subtitle.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"section-subtitle.js"}
package/dist/styles/tokens.css CHANGED
@@ -847,6 +847,198 @@
847
847
  border-radius: 0 !important;
848
848
  }
849
849
 
850
+ /* ============================================================
851
+ Cycle Marketing — Camada 1 (motion utilities)
852
+ Consumido por componentes em `@fluencypassdevs/cycle/marketing/motion/*`.
853
+ Replicado de src/app/globals.css para que o CSS distribuido contenha
854
+ as classes utility (consumers que importam apenas `styles.css` precisam delas).
855
+ ============================================================ */
856
+
857
+ :root {
858
+ --duration-fast: 180ms;
859
+ --duration-base: 320ms;
860
+ --duration-slow: 600ms;
861
+ --duration-reveal: 720ms;
862
+ --ease-out-reveal: cubic-bezier(0.22, 1, 0.36, 1);
863
+ --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
864
+ }
865
+
866
+ .cycle-reveal {
867
+ opacity: 0;
868
+ transform: translateY(8px);
869
+ transition:
870
+ opacity var(--duration-reveal) var(--ease-out-reveal),
871
+ transform var(--duration-reveal) var(--ease-out-reveal);
872
+ will-change: opacity, transform;
873
+ }
874
+
875
+ .cycle-reveal.is-visible {
876
+ opacity: 1;
877
+ transform: none;
878
+ }
879
+
880
+ @keyframes cycle-fade-up {
881
+ from { opacity: 0; transform: translate3d(0, 12px, 0); }
882
+ to { opacity: 1; transform: translate3d(0, 0, 0); }
883
+ }
884
+
885
+ .stagger-child {
886
+ opacity: 0;
887
+ }
888
+
889
+ .stagger-revealed .stagger-child {
890
+ animation: cycle-fade-up 0.6s var(--ease-out-reveal) forwards;
891
+ animation-delay: calc(var(--stagger-index, 0) * var(--stagger-step-ms, 100ms));
892
+ }
893
+
894
+ @keyframes cycle-anchor-pulse {
895
+ 0% {
896
+ box-shadow: 0 0 0 0 rgba(212, 85, 88, 0);
897
+ transform: translateY(0);
898
+ }
899
+ 15% {
900
+ box-shadow: 0 0 0 0 rgba(212, 85, 88, 0.5);
901
+ transform: translateY(-3px);
902
+ }
903
+ 100% {
904
+ box-shadow: 0 0 0 20px rgba(212, 85, 88, 0);
905
+ transform: translateY(0);
906
+ }
907
+ }
908
+
909
+ .anchor-target-pulse [data-anchor-pulse] {
910
+ animation: cycle-anchor-pulse 1.6s var(--ease-out-reveal);
911
+ }
912
+
913
+ .light-surface {
914
+ --background: #f5f5f5;
915
+ --foreground: oklch(0.18 0.01 250);
916
+ --card: #ffffff;
917
+ --card-foreground: oklch(0.18 0.01 250);
918
+ --popover: #ffffff;
919
+ --popover-foreground: oklch(0.18 0.01 250);
920
+ --primary: oklch(0.18 0.01 250);
921
+ --primary-foreground: oklch(0.98 0 0);
922
+ --secondary: oklch(0.94 0.003 30);
923
+ --secondary-foreground: oklch(0.18 0.01 250);
924
+ --muted: oklch(0.94 0.003 30);
925
+ --muted-foreground: oklch(0.42 0.012 250);
926
+ --accent: oklch(0.94 0.003 30);
927
+ --accent-foreground: oklch(0.18 0.01 250);
928
+ --border: oklch(0.88 0.005 30);
929
+ --input: oklch(0.9 0.005 30);
930
+ --ring: oklch(0.55 0.015 250);
931
+
932
+ background-color: var(--background);
933
+ color: var(--foreground);
934
+ }
935
+
936
+ @media (prefers-reduced-motion: reduce) {
937
+ .cycle-reveal {
938
+ opacity: 1;
939
+ transform: none;
940
+ transition: none;
941
+ }
942
+ .stagger-child,
943
+ .stagger-revealed .stagger-child {
944
+ opacity: 1;
945
+ transform: none;
946
+ animation: none;
947
+ }
948
+ .anchor-target-pulse [data-anchor-pulse] {
949
+ animation: none;
950
+ }
951
+ }
952
+
953
+ /* ============================================================
954
+ Cycle Marketing — Camada 2a (Foundation visual)
955
+ Replicado de globals.css para que o CSS distribuido (styles.css)
956
+ contenha os tokens e utility classes consumidas pelos componentes
957
+ em `@fluencypassdevs/cycle/marketing/{layout,typography,effects}/*`.
958
+ ============================================================ */
959
+
960
+ :root {
961
+ --brand-soft: #ed6a6d;
962
+ --brand-default: #d45558;
963
+ --brand-dark: #b3244f;
964
+ --brand-soft-light: #ffb0b2;
965
+
966
+ --gradient-brand-primary: linear-gradient(to bottom, var(--brand-soft), var(--brand-dark));
967
+ --gradient-brand-angled: linear-gradient(135deg, var(--brand-soft), var(--brand-default), var(--brand-dark));
968
+
969
+ --glow-brand-circle: radial-gradient(
970
+ ellipse 70% 80% at center,
971
+ rgba(237, 106, 109, 0.18),
972
+ rgba(179, 36, 79, 0.10) 45%,
973
+ transparent
974
+ );
975
+ }
976
+
977
+ .cycle-card-dark-glow {
978
+ box-shadow:
979
+ inset 0 1px 0 rgba(255, 255, 255, 0.04),
980
+ 0 4px 16px rgba(237, 106, 109, 0.06),
981
+ 0 24px 48px rgba(0, 0, 0, 0.45);
982
+ transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
983
+ }
984
+ .cycle-card-dark-glow[data-interactive="true"]:hover {
985
+ box-shadow:
986
+ inset 0 1px 0 rgba(255, 255, 255, 0.08),
987
+ 0 8px 32px rgba(237, 106, 109, 0.22),
988
+ 0 40px 72px rgba(0, 0, 0, 0.55);
989
+ transform: translateY(-3px);
990
+ }
991
+
992
+ .cycle-circle-glow {
993
+ position: absolute;
994
+ inset: 0;
995
+ pointer-events: none;
996
+ background: var(--glow-brand-circle);
997
+ filter: blur(40px);
998
+ animation: cycle-circle-glow-pulse 4.5s ease-in-out infinite;
999
+ }
1000
+ .cycle-circle-glow[data-size="sm"] { transform: scale(0.6); }
1001
+ .cycle-circle-glow[data-size="md"] { transform: scale(0.8); }
1002
+ .cycle-circle-glow[data-size="lg"] { transform: scale(1); }
1003
+
1004
+ @keyframes cycle-circle-glow-pulse {
1005
+ 0%, 100% { opacity: 0.55; }
1006
+ 50% { opacity: 1; }
1007
+ }
1008
+
1009
+ .cycle-marquee {
1010
+ overflow: hidden;
1011
+ width: 100%;
1012
+ }
1013
+ .cycle-marquee-track {
1014
+ display: flex;
1015
+ width: max-content;
1016
+ gap: var(--cycle-marquee-gap, 48px);
1017
+ animation: cycle-marquee-x var(--cycle-marquee-duration, 40s) linear infinite;
1018
+ }
1019
+ .cycle-marquee-track[data-direction="right"] {
1020
+ animation-direction: reverse;
1021
+ }
1022
+ .cycle-marquee[data-pause-on-hover="true"]:hover .cycle-marquee-track,
1023
+ .cycle-marquee[data-pause-on-hover="true"]:focus-within .cycle-marquee-track {
1024
+ animation-play-state: paused;
1025
+ }
1026
+
1027
+ @keyframes cycle-marquee-x {
1028
+ from { transform: translateX(0); }
1029
+ to { transform: translateX(calc(-50% - var(--cycle-marquee-gap, 48px) / 2)); }
1030
+ }
1031
+
1032
+ @media (prefers-reduced-motion: reduce) {
1033
+ .cycle-card-dark-glow,
1034
+ .cycle-card-dark-glow[data-interactive="true"]:hover {
1035
+ transition: none;
1036
+ transform: none;
1037
+ }
1038
+ .cycle-circle-glow { animation: none; }
1039
+ .cycle-marquee-track { animation: none; }
1040
+ }
1041
+
850
1042
  @media (pointer: fine) {
851
1043
  [data-media-player][data-layout='video']:not([data-fullscreen]) {
852
1044
  border-radius: 16px !important;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluencypassdevs/cycle",
3
- "version": "1.13.0",
3
+ "version": "1.15.0",
4
4
  "description": "Cycle Design System — UI component library by Fluencypass",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -47,6 +47,42 @@
47
47
  "import": "./dist/lib/utils.js",
48
48
  "types": "./dist/lib/utils.d.ts"
49
49
  },
50
+ "./hooks/*": {
51
+ "import": "./dist/hooks/*.js",
52
+ "types": "./dist/hooks/*.d.ts"
53
+ },
54
+ "./marketing/motion": {
55
+ "import": "./dist/marketing/motion/index.js",
56
+ "types": "./dist/marketing/motion/index.d.ts"
57
+ },
58
+ "./marketing/motion/*": {
59
+ "import": "./dist/marketing/motion/*.js",
60
+ "types": "./dist/marketing/motion/*.d.ts"
61
+ },
62
+ "./marketing/layout": {
63
+ "import": "./dist/marketing/layout/index.js",
64
+ "types": "./dist/marketing/layout/index.d.ts"
65
+ },
66
+ "./marketing/layout/*": {
67
+ "import": "./dist/marketing/layout/*.js",
68
+ "types": "./dist/marketing/layout/*.d.ts"
69
+ },
70
+ "./marketing/typography": {
71
+ "import": "./dist/marketing/typography/index.js",
72
+ "types": "./dist/marketing/typography/index.d.ts"
73
+ },
74
+ "./marketing/typography/*": {
75
+ "import": "./dist/marketing/typography/*.js",
76
+ "types": "./dist/marketing/typography/*.d.ts"
77
+ },
78
+ "./marketing/effects": {
79
+ "import": "./dist/marketing/effects/index.js",
80
+ "types": "./dist/marketing/effects/index.d.ts"
81
+ },
82
+ "./marketing/effects/*": {
83
+ "import": "./dist/marketing/effects/*.js",
84
+ "types": "./dist/marketing/effects/*.d.ts"
85
+ },
50
86
  "./styles.css": "./dist/styles/tokens.css",
51
87
  "./tailwind-theme.css": "./dist/styles/tokens.css"
52
88
  },