@invisibleloop/pulse 0.20.4 → 0.20.6

package/src/ui/testimonial.js

@@ -1,59 +0,0 @@
-/**
- * Pulse UI — Testimonial
- *
- * A customer quote with optional star rating, avatar, and attribution.
- *
- * @param {object} opts
- * @param {string} opts.quote    - The testimonial text
- * @param {string} opts.name     - Author full name
- * @param {string} opts.role     - Author role/company (e.g. "CEO at Acme")
- * @param {string} opts.src      - Avatar image URL; falls back to initials when omitted
- * @param {string} opts.initials - Override auto-derived initials (useful for names containing & or unusual characters)
- * @param {number} opts.rating   - Star rating 1–5; omit to hide stars
- * @param {string} opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-export function testimonial({
-  quote      = '',
-  name       = '',
-  role       = '',
-  src        = '',
-  initials:  initialsOverride = '',
-  rating     = 0,
-  class: cls = '',
-} = {}) {
-  const classes = ['ui-testimonial', cls].filter(Boolean).join(' ')
-
-  const stars = rating > 0
-    ? `<p class="ui-testimonial-rating" aria-label="${Math.round(rating)} out of 5 stars">${'★'.repeat(Math.min(5, Math.max(1, Math.round(rating))))}</p>`
-    : ''
-
-  // Filter to letter chars only so names like "Tomás & Ren Okabe" produce "TR" not "T&"
-  const derivedInitials = name
-    .split(/\s+/)
-    .map(w => w.replace(/[^a-zA-ZÀ-ÿ]/g, ''))
-    .filter(Boolean)
-    .map(w => w[0])
-    .join('')
-    .slice(0, 2)
-    .toUpperCase()
-  const initials = initialsOverride || derivedInitials
-
-  const avatarHtml = src
-    ? `<img src="${e(src)}" alt="${e(name)}" class="ui-testimonial-avatar" loading="lazy" width="40" height="40">`
-    : `<div class="ui-testimonial-avatar ui-testimonial-avatar--initials" aria-hidden="true">${e(initials)}</div>`
-
-  return `<figure class="${e(classes)}">
-  ${stars}
-  <blockquote class="ui-testimonial-quote"><p>${e(quote)}</p></blockquote>
-  <figcaption class="ui-testimonial-author">
-    ${avatarHtml}
-    <div class="ui-testimonial-meta">
-      <p class="ui-testimonial-name">${e(name)}</p>
-      ${role ? `<p class="ui-testimonial-role">${e(role)}</p>` : ''}
-    </div>
-  </figcaption>
-</figure>`
-}

package/src/ui/timeline.js

@@ -1,72 +0,0 @@
-/**
- * Pulse UI — Timeline
- *
- * Ordered list of events or steps connected by a line.
- * Supports vertical (default) and horizontal orientations.
- * Each item accepts a raw HTML content slot — pass any component output.
- *
- * @param {object}   opts
- * @param {'vertical'|'horizontal'} opts.direction - Orientation (default: 'vertical')
- * @param {Array}    opts.items   - Array of timelineItem option objects
- * @param {string}   opts.content - Raw HTML alternative to opts.items (advanced)
- * @param {string}   opts.class
- *
- * timelineItem:
- * @param {string}   opts.dot      - Raw HTML inside the dot — SVG icon or emoji
- * @param {'accent'|'success'|'warning'|'error'|'muted'} opts.dotColor
- * @param {string}   opts.label    - Timestamp or step label (escaped)
- * @param {string}   opts.content  - Raw HTML body — any component output
- */
-
-import { escHtml as e } from '../html.js'
-
-const DOT_COLORS = new Set(['accent', 'success', 'warning', 'error', 'muted'])
-
-export function timelineItem({
-  dot        = '',
-  dotColor   = 'accent',
-  label      = '',
-  content    = '',
-  class: cls = '',
-} = {}) {
-  if (!DOT_COLORS.has(dotColor)) dotColor = 'accent'
-
-  const dotClasses = [
-    'ui-timeline-dot',
-    `ui-timeline-dot--${dotColor}`,
-    dot ? 'ui-timeline-dot--icon' : '',
-  ].filter(Boolean).join(' ')
-
-  const labelHtml = label
-    ? `<span class="ui-timeline-label">${e(label)}</span>`
-    : ''
-
-  const itemClasses = ['ui-timeline-item', cls].filter(Boolean).join(' ')
-
-  return `<li class="${itemClasses}">
-  <div class="ui-timeline-side">
-    <div class="ui-timeline-connector ui-timeline-connector--before"></div>
-    <div class="${e(dotClasses)}" aria-hidden="true">${dot}</div>
-    <div class="ui-timeline-connector ui-timeline-connector--after"></div>
-  </div>
-  <div class="ui-timeline-main">
-    ${labelHtml}
-    <div class="ui-timeline-body">${content}</div>
-  </div>
-</li>`
-}
-
-export function timeline({
-  direction  = 'vertical',
-  items      = [],
-  content    = '',
-  class: cls = '',
-} = {}) {
-  if (direction !== 'horizontal') direction = 'vertical'
-
-  const classes = ['ui-timeline', `ui-timeline--${direction}`, cls].filter(Boolean).join(' ')
-
-  const itemsHtml = content || items.map(item => timelineItem(item)).join('')
-
-  return `<ol class="${e(classes)}">${itemsHtml}</ol>`
-}

package/src/ui/top-strip.js

@@ -1,47 +0,0 @@
-/**
- * Pulse UI — TopStrip
- *
- * A slim utility bar that sits above the nav — phone numbers, trading hours,
- * social links, or any short announcements. Distinct from banner() which is
- * for promotional/dismissible messages.
- *
- * Two layout modes:
- *   - left + right slots: `topStrip({ left: '...', right: '...' })`
- *   - single content: `topStrip({ content: '...' })`
- *
- * @param {object}  opts
- * @param {string}  opts.content    - Single centred content (overrides left/right)
- * @param {string}  opts.left       - Left-aligned slot
- * @param {string}  opts.right      - Right-aligned slot
- * @param {string}  opts.background - CSS background value
- * @param {string}  opts.color      - Foreground/text colour
- * @param {string}  opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-export function topStrip({
-  content    = '',
-  left       = '',
-  right      = '',
-  background = '',
-  color      = '',
-  class: cls = '',
-} = {}) {
-  const classes = ['ui-top-strip', cls].filter(Boolean).join(' ')
-
-  const styles = [
-    background && `background:${background.replace(/"/g, "'")}`,
-    color      && `color:${color.replace(/"/g, "'")}`,
-  ].filter(Boolean).join(';')
-  const styleAttr = styles ? ` style="${styles}"` : ''
-
-  if (content) {
-    return `<div class="${e(classes)}"${styleAttr}><div class="ui-top-strip-content">${content}</div></div>`
-  }
-
-  return `<div class="${e(classes)}"${styleAttr}>
-  ${left  ? `<div class="ui-top-strip-left">${left}</div>` : ''}
-  ${right ? `<div class="ui-top-strip-right">${right}</div>` : ''}
-</div>`
-}

package/src/ui/trust-list.js

@@ -1,46 +0,0 @@
-/**
- * Pulse UI — TrustList
- *
- * A compact row of trust/compliance badges — "Part P registered · NICEIC · £10m insured".
- * Each item gets a leading icon (default: check mark). Common on trades, services,
- * and professional-services sites.
- *
- * @param {object}   opts
- * @param {string[]} opts.items       - List of labels
- * @param {string}   opts.icon        - Raw HTML slot — icon shown before each item (default: ✓ check SVG)
- * @param {string}   opts.color       - Icon colour CSS value (default: inherits --ui-accent)
- * @param {'sm'|'md'} opts.size
- * @param {string}   opts.class
- */
-
-import { escHtml as e } from '../html.js'
-import { iconCheck } from './icons.js'
-
-const SIZES = new Set(['sm', 'md'])
-
-export function trustList({
-  items      = [],
-  icon       = iconCheck({ size: 14 }),
-  color      = '',
-  size       = 'sm',
-  class: cls = '',
-} = {}) {
-  if (!SIZES.has(size)) size = 'sm'
-
-  const classes = [
-    'ui-trust-list',
-    size !== 'sm' && `ui-trust-list--${size}`,
-    cls,
-  ].filter(Boolean).join(' ')
-
-  const iconStyle = color ? ` style="color:${color.replace(/"/g, "'")}"` : ''
-
-  const itemsHtml = items.map(label =>
-    `<li class="ui-trust-list-item">
-  <span class="ui-trust-list-icon" aria-hidden="true"${iconStyle}>${icon}</span>
-  <span>${e(label)}</span>
-</li>`
-  ).join('')
-
-  return `<ul class="${e(classes)}">${itemsHtml}</ul>`
-}