@frequencyads/components 0.1.1 → 0.1.3

package/llms.txt

@@ -90,6 +90,15 @@ import { PrincipleCard } from '@frequencyads/components';
 ```
 Props: accentColor, title, description, doHint, dontHint
 
+### TestimonialCard
+Quote card with attribution, avatar, and accent color. Displays customer testimonials or endorsements.
+```tsx
+import { TestimonialCard } from '@frequencyads/components';
+<TestimonialCard quote="Frequency transformed our workflow." name="Sarah Chen" role="Head of Audio" company="Podcast Network Inc." accentColor="blue" />
+<TestimonialCard quote="Simply the best." name="Alex Kim" avatarSrc="/avatars/alex.jpg" accentColor="violet" />
+```
+Props: quote, name, role, company, avatarSrc, accentColor (MantineColor, default 'blue')
+
 ### DosDonts
 Side-by-side Do/Don't comparison cards with green/red coloring and check/X icons.
 ```tsx

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "@frequencyads/components",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Shared Mantine UI components for Frequency apps",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "style": "dist/components.css",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./style.css": "./dist/components.css"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "vite build",
+    "dev": "vite build --watch",
     "lint": "eslint .",
     "type-check": "tsc --noEmit"
   },
@@ -36,10 +38,12 @@
     "@mantine/core": "^7",
     "@mantine/hooks": "^7",
     "@types/react": "^19",
+    "@vitejs/plugin-react": "^5.1.3",
     "postcss-preset-mantine": "^1",
     "postcss-simple-vars": "^7",
-    "tsup": "^8",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vite": "^6",
+    "vite-plugin-dts": "^4.5.4"
   },
   "files": [
     "dist",

package/dist/index.css

@@ -1,543 +0,0 @@
-/* src/AnimatedWaveform/AnimatedWaveform.module.css */
-.root {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100vw;
-  height: calc(12rem * var(--mantine-scale));
-  pointer-events: none;
-  opacity: 0.6;
-}
-.svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* src/AudioWaveform/AudioWaveform.module.css */
-.root {
-  position: relative;
-  width: 100%;
-  cursor: pointer;
-  overflow: hidden;
-  border-radius: 4px;
-}
-.progressOverlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  pointer-events: none;
-  transition: width 0.1s linear;
-  border-radius: 4px;
-}
-.bars {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding: 4px;
-  overflow: hidden;
-}
-.bar {
-  min-height: 2px;
-  border-radius: 1px;
-  transition: background-color 0.15s linear;
-  flex-shrink: 0;
-}
-.loading {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(255, 255, 255, 0.9);
-  font-size: 14px;
-  color: #666;
-  z-index: 1;
-  border-radius: 4px;
-  backdrop-filter: blur(2px);
-}
-
-/* src/AudioPlayer/AudioPlayer.module.css */
-.root {
-  width: 100%;
-  padding: 12px 16px;
-  background-color: var(--mantine-color-default);
-  border-radius: var(--mantine-radius-sm);
-}
-.playButton {
-  flex-shrink: 0;
-  transition: transform 0.2s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-.playButton:hover {
-  transform: scale(1.05);
-}
-.playButton:active {
-  transform: scale(0.95);
-}
-.time {
-  flex-shrink: 0;
-  min-width: 40px;
-  white-space: nowrap;
-}
-.volumeGroup {
-  flex-shrink: 0;
-}
-
-/* src/CodeBlock/CodeBlock.module.css */
-.root {
-  margin: var(--mantine-spacing-lg) 0;
-}
-.textarea {
-  width: 100%;
-  padding: var(--mantine-spacing-md);
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    "SF Mono",
-    Menlo,
-    Consolas,
-    monospace;
-  font-size: var(--mantine-font-size-sm);
-  background-color: var(--mantine-color-dark-9);
-  color: var(--mantine-color-gray-1);
-  border: 1px solid var(--mantine-color-dark-6);
-  border-radius: var(--mantine-radius-md);
-  resize: none;
-}
-.textarea:focus {
-  outline: none;
-  border-color: var(--mantine-color-blue-5);
-}
-
-/* src/Copyable/Copyable.module.css */
-.root {
-  cursor: pointer;
-}
-.toast {
-  position: fixed;
-  bottom: calc(1.5rem * var(--mantine-scale));
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
-  animation: toast-in 0.2s ease-out;
-}
-@keyframes toast-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(calc(0.5rem * var(--mantine-scale)));
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-/* src/ColorPalette/ColorPalette.module.css */
-.root {
-  margin-bottom: var(--mantine-spacing-lg);
-}
-.shade {
-  cursor: pointer;
-  text-align: center;
-}
-.color {
-  height: calc(3rem * var(--mantine-scale));
-  border-radius: var(--mantine-radius-sm);
-  transition: transform 150ms ease;
-}
-.color:hover {
-  transform: scale(1.05);
-}
-.main {
-  outline: 2px solid var(--mantine-color-gray-4);
-  outline-offset: 2px;
-}
-
-/* src/ColorSwatch/ColorSwatch.module.css */
-.root {
-  overflow: hidden;
-  cursor: pointer;
-  transition: transform 150ms ease;
-}
-.root:hover {
-  transform: translateY(calc(-0.125rem * var(--mantine-scale)));
-}
-.preview {
-  height: calc(8rem * var(--mantine-scale));
-}
-.info {
-  padding: var(--mantine-spacing-sm);
-}
-
-/* src/DosDonts/DosDonts.module.css */
-.root {
-  display: flex;
-  flex-direction: column;
-  gap: var(--mantine-spacing-md);
-}
-.dont {
-  background-color: var(--mantine-color-red-light);
-  border: 1px solid var(--mantine-color-red-outline);
-}
-.dontIcon,
-.dontLabel {
-  color: var(--mantine-color-red-filled);
-}
-.do {
-  background-color: var(--mantine-color-green-light);
-  border: 1px solid var(--mantine-color-green-outline);
-}
-.doIcon,
-.doLabel {
-  color: var(--mantine-color-green-filled);
-}
-
-/* src/ExpandableCard/ExpandableCard.module.css */
-.root {
-  overflow: hidden;
-  background-color: var(--mantine-color-gray-1);
-}
-[data-mantine-color-scheme=dark] .root {
-  background-color: var(--mantine-color-dark-6);
-}
-.inner {
-  padding: var(--mantine-spacing-lg) var(--mantine-spacing-xl);
-}
-
-/* src/FadeInSection/FadeInSection.module.css */
-.root {
-  opacity: 0;
-  transform: translateY(calc(2rem * var(--mantine-scale)));
-  transition: opacity 700ms ease-out, transform 700ms ease-out;
-}
-.visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-/* src/GradientSwatch/GradientSwatch.module.css */
-.root {
-  overflow: hidden;
-  cursor: pointer;
-  transition: transform 150ms ease;
-}
-.root:hover {
-  transform: translateY(calc(-0.125rem * var(--mantine-scale)));
-}
-.preview {
-  height: calc(5rem * var(--mantine-scale));
-}
-.info {
-  padding: var(--mantine-spacing-sm);
-}
-
-/* src/VideoBackground/VideoBackground.module.css */
-.root {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* src/Hero/Hero.module.css */
-.root {
-  position: relative;
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #121212;
-  overflow: hidden;
-}
-.content {
-  position: relative;
-  z-index: 2;
-  text-align: center;
-  padding: var(--mantine-spacing-xl);
-}
-.vignette {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: calc(35rem * var(--mantine-scale));
-  height: calc(35rem * var(--mantine-scale));
-  background:
-    radial-gradient(
-      circle,
-      #121212 0%,
-      #121212 30%,
-      transparent 65%);
-  pointer-events: none;
-  z-index: 1;
-}
-.logoWrapper {
-  position: relative;
-}
-.logo {
-  position: relative;
-  z-index: 2;
-  width: calc(10rem * var(--mantine-scale));
-  height: calc(10rem * var(--mantine-scale));
-}
-@media (min-width: 48em) {
-  .logo {
-    width: calc(14rem * var(--mantine-scale));
-    height: calc(14rem * var(--mantine-scale));
-  }
-}
-@media (min-width: 75em) {
-  .logo {
-    width: calc(18rem * var(--mantine-scale));
-    height: calc(18rem * var(--mantine-scale));
-  }
-}
-.glow {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  filter: blur(calc(3rem * var(--mantine-scale)));
-  opacity: 0.3;
-  background:
-    radial-gradient(
-      circle,
-      #169BDE 0%,
-      #7E57C2 50%,
-      transparent 70%);
-  transform: scale(1.5);
-  pointer-events: none;
-}
-.textWrapper {
-  position: relative;
-}
-.heading {
-  position: relative;
-  z-index: 2;
-  color: transparent;
-  background-clip: text;
-  -webkit-background-clip: text;
-  font-size: calc(3rem * var(--mantine-scale));
-  font-family: Montserrat, sans-serif;
-  font-weight: 700;
-  line-height: 1.1;
-  letter-spacing: -2px;
-  text-transform: uppercase;
-}
-@media (min-width: 48em) {
-  .heading {
-    font-size: calc(4rem * var(--mantine-scale));
-  }
-}
-@media (min-width: 75em) {
-  .heading {
-    font-size: calc(6rem * var(--mantine-scale));
-  }
-}
-@keyframes shimmer {
-  0% {
-    background-position: 100% 50%;
-  }
-  50% {
-    background-position: 0% 50%;
-  }
-  100% {
-    background-position: 100% 50%;
-  }
-}
-.shimmer {
-  animation: shimmer 6s ease-in-out infinite;
-}
-.tagline {
-  color: rgba(255, 255, 255, 0.6);
-  font-size: var(--mantine-font-size-lg);
-  font-family:
-    "Source Sans 3",
-    "Source Sans Pro",
-    sans-serif;
-  max-width: calc(35rem * var(--mantine-scale));
-}
-@media (min-width: 48em) {
-  .tagline {
-    font-size: var(--mantine-font-size-xl);
-  }
-}
-.primaryButton {
-  font-family: Montserrat, sans-serif;
-  font-weight: 600;
-}
-.secondaryButton {
-  font-family: Montserrat, sans-serif;
-  font-weight: 600;
-  border-color: rgba(255, 255, 255, 0.2);
-  color: var(--mantine-color-white);
-}
-.secondaryButton:hover {
-  background-color: rgba(255, 255, 255, 0.05);
-}
-
-/* src/MiniAudioPlayer/MiniAudioPlayer.module.css */
-.root {
-  padding: 4px 8px;
-  border-radius: 4px;
-  background-color: var(--mantine-color-default);
-  border: 1px solid var(--mantine-color-default-border);
-  width: fit-content;
-  min-width: 120px;
-  max-width: 300px;
-}
-.playButton {
-  transition: transform 0.2s ease;
-}
-.playButton:hover {
-  transform: scale(1.05);
-}
-.playButton:active {
-  transform: scale(0.95);
-}
-
-/* src/PrincipleCard/PrincipleCard.module.css */
-.root {
-  border-left: 4px solid;
-  background-color: var(--mantine-color-default);
-}
-
-/* src/SpeedDial/SpeedDial.module.css */
-.root {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-.root[data-direction=down] {
-  flex-direction: column-reverse;
-}
-.root[data-direction=left],
-.root[data-direction=right] {
-  flex-direction: row;
-  gap: 12px;
-}
-.root[data-direction=left] {
-  flex-direction: row-reverse;
-}
-.actions {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-.actions[data-direction=down] {
-  flex-direction: column-reverse;
-}
-.actions[data-direction=left],
-.actions[data-direction=right] {
-  flex-direction: row;
-  gap: 8px;
-}
-.actions[data-direction=left] {
-  flex-direction: row-reverse;
-}
-.fab {
-  box-shadow: var(--mantine-shadow-md);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-.fab:hover {
-  box-shadow: var(--mantine-shadow-lg);
-  transform: scale(1.05);
-}
-.fab[data-open] {
-  transform: rotate(45deg);
-}
-.fab[data-open]:hover {
-  transform: rotate(45deg) scale(1.05);
-}
-.actionButton {
-  box-shadow: var(--mantine-shadow-sm);
-  transition: transform 0.15s ease;
-}
-.actionButton:hover {
-  transform: scale(1.1);
-}
-
-/* src/SplitSection/SplitSection.module.css */
-.container {
-  max-width: 80rem;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: var(--mantine-spacing-xl);
-  padding-right: var(--mantine-spacing-xl);
-}
-@media (min-width: 48em) {
-  .container {
-    padding-left: calc(var(--mantine-spacing-xl) * 1.5);
-    padding-right: calc(var(--mantine-spacing-xl) * 1.5);
-  }
-}
-.layout {
-  display: flex;
-  flex-direction: column;
-  gap: var(--mantine-spacing-xl);
-}
-@media (min-width: 62em) {
-  .layout {
-    flex-direction: row;
-    gap: calc(var(--mantine-spacing-xl) * 2);
-  }
-}
-.reversed {
-  flex-direction: column;
-}
-@media (min-width: 62em) {
-  .reversed {
-    flex-direction: row-reverse;
-  }
-}
-.headingSide {
-  flex-shrink: 0;
-}
-@media (min-width: 62em) {
-  .headingSide {
-    width: 45%;
-  }
-}
-.sticky {
-}
-@media (min-width: 62em) {
-  .sticky .stickyInner {
-    position: sticky;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-.stickyInner {
-}
-.contentSide {
-  flex: 1;
-  min-width: 0;
-}
-@media (min-width: 62em) {
-  .contentSide {
-    padding-left: var(--mantine-spacing-lg);
-  }
-}
-.title {
-  text-transform: uppercase;
-  line-height: 1.1;
-  letter-spacing: -0.02em;
-}
-.preTitle {
-  display: block;
-  font-size: clamp(1.5rem, 3vw, 2.25rem);
-  font-weight: 600;
-}
-.titleHighlight {
-  display: block;
-  font-size: clamp(2.5rem, 5vw, 3.75rem);
-  font-weight: 700;
-  letter-spacing: -0.02em;
-}
-.description {
-  max-width: 36rem;
-}