@kolkrabbi/kol-component 0.7.0 → 0.8.0

package/src/dashboards/shared/useChartTooltip.js

@@ -1,25 +0,0 @@
-import { useState, useCallback, useRef } from 'react'
-
-const useChartTooltip = () => {
-  const [activeIndex, setActiveIndex] = useState(null)
-  const containerRef = useRef(null)
-
-  const containerHandlers = {
-    onMouseMove: (e) => {
-      if (!containerRef.current) return
-      const rect = containerRef.current.getBoundingClientRect()
-      containerRef.current.style.setProperty('--tx', `${e.clientX - rect.left}px`)
-      containerRef.current.style.setProperty('--ty', `${e.clientY - rect.top}px`)
-    },
-    onMouseLeave: () => setActiveIndex(null)
-  }
-
-  const handlers = useCallback((index) => ({
-    onMouseEnter: () => setActiveIndex(index),
-    onMouseLeave: () => setActiveIndex(null)
-  }), [])
-
-  return { activeIndex, handlers, containerHandlers, containerRef }
-}
-
-export default useChartTooltip

package/src/dashboards/shared/useCountUp.js

@@ -1,107 +0,0 @@
-import { useState, useEffect, useRef } from 'react'
-
-const parseNumeric = (value) => {
-  const str = String(value)
-  const match = str.match(/^([^0-9]*?)([\d,.]+)(.*?)$/)
-  if (!match) return null
-  const prefix = match[1]
-  const numStr = match[2]
-  const suffix = match[3]
-  const num = parseFloat(numStr.replace(/,/g, ''))
-  if (isNaN(num)) return null
-  const hasCommas = numStr.includes(',')
-  const decimalMatch = numStr.match(/\.(\d+)/)
-  const decimals = decimalMatch ? decimalMatch[1].length : 0
-  return { prefix, num, suffix, hasCommas, decimals }
-}
-
-const formatNumber = (n, hasCommas, decimals) => {
-  const fixed = n.toFixed(decimals)
-  if (!hasCommas) return fixed
-  const [intPart, decPart] = fixed.split('.')
-  const withCommas = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-  return decPart ? `${withCommas}.${decPart}` : withCommas
-}
-
-const useCountUp = (targetValue, { duration = 600, enabled = true } = {}) => {
-  const [displayValue, setDisplayValue] = useState(targetValue)
-  const ref = useRef(null)
-  const hasEnteredRef = useRef(false)
-  const prevTargetRef = useRef(targetValue)
-  const rafRef = useRef(null)
-  const elRef = useRef(null)
-
-  useEffect(() => {
-    if (!enabled) {
-      setDisplayValue(targetValue)
-      return
-    }
-
-    const animate = (from, to) => {
-      const parsed = parseNumeric(to)
-      if (!parsed) {
-        setDisplayValue(to)
-        return
-      }
-
-      const parsedFrom = parseNumeric(from)
-      const startNum = parsedFrom ? parsedFrom.num : 0
-      const endNum = parsed.num
-      const startTime = performance.now()
-
-      const step = (now) => {
-        const elapsed = now - startTime
-        const t = Math.min(elapsed / duration, 1)
-        const eased = t * (2 - t) // ease-out quadratic
-        const current = startNum + (endNum - startNum) * eased
-        const formatted = `${parsed.prefix}${formatNumber(current, parsed.hasCommas, parsed.decimals)}${parsed.suffix}`
-        setDisplayValue(formatted)
-        if (t < 1) {
-          rafRef.current = requestAnimationFrame(step)
-        }
-      }
-
-      if (rafRef.current) cancelAnimationFrame(rafRef.current)
-      rafRef.current = requestAnimationFrame(step)
-    }
-
-    // On target change while already visible
-    if (hasEnteredRef.current && prevTargetRef.current !== targetValue) {
-      animate(prevTargetRef.current, targetValue)
-      prevTargetRef.current = targetValue
-      return
-    }
-
-    prevTargetRef.current = targetValue
-
-    // IntersectionObserver for first entry
-    if (hasEnteredRef.current) return
-
-    const el = elRef.current
-    if (!el) {
-      setDisplayValue(targetValue)
-      return
-    }
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting && !hasEnteredRef.current) {
-          hasEnteredRef.current = true
-          animate('0', targetValue)
-          observer.disconnect()
-        }
-      },
-      { threshold: 0.1 }
-    )
-    observer.observe(el)
-
-    return () => {
-      observer.disconnect()
-      if (rafRef.current) cancelAnimationFrame(rafRef.current)
-    }
-  }, [targetValue, duration, enabled])
-
-  return { displayValue, ref: elRef }
-}
-
-export default useCountUp

package/src/molecules/ArticleCard.jsx

@@ -1,178 +0,0 @@
-import Pill from '../atoms/Pill.jsx'
-import Image from './Image.jsx'
-
-/**
- * Optional link wrapper — the one place routing lives. `http*`/`mailto` hrefs
- * open in a new tab; any other href renders a plain same-tab anchor with an
- * `onNavigate(event)` seam an SPA consumer intercepts (preventDefault + its
- * router). No `href` → the bare content, no anchor.
- */
-function CardLink({ href, onNavigate, className, children }) {
-  if (!href) return <div className={className}>{children}</div>
-  const isExternal = href.startsWith('http') || href.startsWith('mailto')
-  return (
-    <a
-      href={href}
-      onClick={isExternal ? undefined : onNavigate}
-      target={isExternal ? '_blank' : undefined}
-      rel={isExternal ? 'noreferrer noopener' : undefined}
-      className={className}
-    >
-      {children}
-    </a>
-  )
-}
-
-/** Cover-fit thumbnail (or fg-token placeholder box when no src). */
-function Thumb({ src, alt }) {
-  if (!src) return null
-  return (
-    <Image
-      src={src}
-      alt={alt}
-      className="object-cover"
-      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-    />
-  )
-}
-
-/**
- * ArticleCard — one blog-card family with three sizes (`default` / `hero` /
- * `mini`), collapsing what were three byte-identical duplicate components. All
- * three share the flat view-model (title, excerpt, thumbnail, tags, meta) and
- * the link seam; `size` picks the layout.
- *
- * - **default** — grid tile: thumbnail (landscape/portrait) over tag Pills, a
- *   mono title, an excerpt, and a `date • readingTime` meta Pill.
- * - **hero** — index masthead: an optional header row (`label` + `meta`),
- *   a big 16/9 image that zooms on hover, then kicker → title → summary.
- * - **mini** — sidebar row: a fixed 120×120 thumbnail beside title → summary →
- *   meta.
- *
- * De-Sanitized flat props, no router import. Placeholder thumbnails use
- * fg-opacity tokens (theme-aware — no `.dark` style injection). Every string
- * is authored at the call site in its final case — no `text-transform`, no JS
- * casing (the kicker/meta `uppercase` are presentational classes only).
- *
- * @param {'default'|'hero'|'mini'} size  layout preset (default 'default')
- * @param {string}   title       card title
- * @param {string}   excerpt     summary/excerpt paragraph (alias: `summary`)
- * @param {string}   summary     alias for `excerpt` (hero/mini call it this)
- * @param {string}   kicker      hero-only eyebrow above the title
- * @param {string}   label       hero header label (was the hardcoded "Featured")
- * @param {string[]} meta        hero header chips / mini meta line (joined ` • `)
- * @param {string}   date        default meta — left of the `•`
- * @param {string}   readingTime default meta — right of the `•`
- * @param {string[]} tags        default: rendered as Pills; hero/mini: `data-tags` only
- * @param {string}   thumbnail   image src (omit → fg-token placeholder)
- * @param {'landscape'|'portrait'} aspect  default thumbnail ratio (default 'landscape')
- * @param {boolean}  showHeader  hero: show the label/meta header row (default true)
- * @param {string}   href        link target; `http*`/`mailto` → new tab, else same-tab seam
- * @param {Function} onNavigate  (event) => void — same-tab click seam (SPA intercept)
- * @param {string}   className   extra classes on the root
- */
-export default function ArticleCard({
-  size = 'default',
-  title,
-  excerpt,
-  summary,
-  kicker,
-  label,
-  meta,
-  date,
-  readingTime,
-  tags = [],
-  thumbnail,
-  aspect = 'landscape',
-  showHeader = true,
-  href,
-  onNavigate,
-  className = '',
-}) {
-  const body = excerpt ?? summary
-  const dataTags = tags?.length ? tags.join(' ') : undefined
-
-  if (size === 'hero') {
-    return (
-      <CardLink href={href} onNavigate={onNavigate} className={`block group ${className}`.trim()}>
-        <article className="w-full" data-tags={dataTags}>
-          {showHeader && (label || meta?.length) && (
-            <div className="flex justify-between items-center mb-4">
-              {label && <div className="kol-helper-14 text-fg-64">{label}</div>}
-              {meta?.length > 0 && (
-                <div className="flex gap-3 kol-helper-12 text-fg-48">
-                  {meta.map((item, i) => <span key={i}>{item}</span>)}
-                </div>
-              )}
-            </div>
-          )}
-          <div className="aspect-[16/9] mb-4 overflow-hidden w-full bg-fg-04 border border-fg-08 hover:border-fg-16 rounded">
-            {thumbnail && (
-              <Image
-                src={thumbnail}
-                alt={title}
-                className="object-cover transition-transform duration-300 group-hover:scale-105"
-                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-              />
-            )}
-          </div>
-          <div className="space-y-3">
-            {kicker && (
-              <div className="kol-helper-16 uppercase tracking-wide text-fg-64">{kicker}</div>
-            )}
-            <h2 className="kol-sans-heading-03 transition-opacity duration-200 group-hover:opacity-70 line-clamp-2">
-              {title}
-            </h2>
-            {body && <p className="kol-mono-14 text-fg-48 line-clamp-3">{body}</p>}
-          </div>
-        </article>
-      </CardLink>
-    )
-  }
-
-  if (size === 'mini') {
-    const metaText = Array.isArray(meta) ? meta.join(' • ') : meta
-    return (
-      <CardLink
-        href={href}
-        onNavigate={onNavigate}
-        className={`group flex gap-6 items-start transition-opacity hover:opacity-80 ${className}`.trim()}
-      >
-        <div className="flex-shrink-0 w-[120px] h-[120px] overflow-hidden rounded bg-fg-12" data-tags={dataTags}>
-          <Thumb src={thumbnail} alt={title} />
-        </div>
-        <div className="flex-1 min-w-0 flex flex-col gap-2.5">
-          <h4 className="kol-mono-14 line-clamp-2 transition-opacity group-hover:opacity-80">{title}</h4>
-          {body && <p className="kol-mono-14 text-fg-64 line-clamp-2">{body}</p>}
-          {metaText && <div className="kol-helper-12 text-fg-80 uppercase">{metaText}</div>}
-        </div>
-      </CardLink>
-    )
-  }
-
-  // size === 'default'
-  return (
-    <CardLink href={href} onNavigate={onNavigate} className={`block group cursor-pointer w-full max-w-full ${className}`.trim()}>
-      <article className="w-full max-w-full" data-tags={dataTags}>
-        <div
-          className="mb-4 overflow-hidden w-full rounded bg-fg-04 border border-fg-08"
-          style={{ aspectRatio: aspect === 'portrait' ? '3/4' : '16/9' }}
-        >
-          <Thumb src={thumbnail} alt={title} />
-        </div>
-        {tags.length > 0 && (
-          <div className="flex flex-wrap gap-2 mb-2">
-            {tags.map((tag, i) => (
-              <Pill key={i} variant="inverse" size="sm">{tag}</Pill>
-            ))}
-          </div>
-        )}
-        <h3 className="mb-2 kol-mono-20 transition-opacity duration-200 group-hover:opacity-70">{title}</h3>
-        {body && <p className="mb-2 kol-mono-14 text-fg-64">{body}</p>}
-        {(date || readingTime) && (
-          <Pill variant="subtle" size="sm">{[date, readingTime].filter(Boolean).join(' • ')}</Pill>
-        )}
-      </article>
-    </CardLink>
-  )
-}

package/src/molecules/WorkListItem.jsx

@@ -1,83 +0,0 @@
-import Image from './Image.jsx'
-import Tag from '../atoms/Tag.jsx'
-
-/**
- * WorkListItem — the list/row view of a `/work` project: the row twin of
- * WorkCard. A horizontal card — a small square thumbnail on the left, then a
- * content column split into a header row (title + tag chips on the left, type +
- * year right-aligned) above a large display preview line (the project
- * description). Hover raises a border; `active` persists that treatment for the
- * last-hovered row so a parent list can mark one active.
- *
- * Shares WorkCard's flat project bag so a `/work` view can toggle grid ⇄ list
- * as a render swap, not a data reshape. The whole row is an anchor (`href`) —
- * the source row was not a link (its parent list owned navigation); as the
- * list-view counterpart to WorkCard it is the click target itself. Thumbnail
- * routes through DS Image (graceful missing-asset fallback); tags render as DS
- * Tag chips. Router-agnostic via `onNavigate(href, event)`.
- *
- * Text casing: no text-transform (KOL rule) — the source's `uppercase` title
- * and `capitalize` type are dropped; strings render verbatim as authored.
- *
- * @param {string}        title        header title
- * @param {string}        thumbnail    thumbnail URL; the block is omitted when absent
- * @param {string[]}      tags         rendered as Tag chips under the title
- * @param {string}        type         right-column label
- * @param {string|number} year         right-column, below type
- * @param {string}        description  large display preview line
- * @param {string}        href         row navigation target
- * @param {boolean}       active       persist the hover treatment (last-hovered row)
- * @param {Function}      onMouseEnter hover callback (parent tracks the active row)
- * @param {Function}      onNavigate   (href, event) => void — anchor click seam for SPA routing
- */
-export default function WorkListItem({
-  title,
-  thumbnail,
-  tags,
-  type,
-  year,
-  description,
-  href,
-  active = false,
-  onMouseEnter,
-  onNavigate,
-}) {
-  return (
-    <a
-      href={href}
-      onClick={onNavigate ? (e) => onNavigate(href, e) : undefined}
-      onMouseEnter={onMouseEnter}
-      className={`self-stretch min-h-24 md:min-h-40 p-4 md:p-6 rounded flex items-stretch gap-4 md:gap-6 mb-4 md:mb-6 overflow-hidden cursor-pointer transition-all duration-300 bg-surface-secondary border ${active ? 'border-fg-16' : 'border-transparent hover:border-fg-16'}`}
-    >
-      {thumbnail && (
-        <div className="shrink-0 w-16 h-16 md:w-28 md:h-28 rounded-[2px] overflow-hidden border border-fg-08">
-          <Image src={thumbnail} alt={title} category="work" name={title} className="w-full h-full object-cover" />
-        </div>
-      )}
-
-      <div className="flex flex-col justify-between min-w-0 flex-1 gap-3 md:gap-4">
-        <div className="flex justify-between items-start md:items-center gap-4">
-          <div className="flex flex-col gap-1 md:gap-2 min-w-0">
-            <div className="kol-mono-14 truncate">{title}</div>
-            {tags?.length > 0 && (
-              <div className="flex flex-wrap gap-1.5">
-                {tags.map((t) => (
-                  <Tag key={t} size="sm" variant="naked" hash={false}>{t}</Tag>
-                ))}
-              </div>
-            )}
-          </div>
-
-          <div className="flex flex-col items-end gap-1 md:gap-2 shrink-0">
-            <span className="kol-mono-12 md:kol-mono-14">{type}</span>
-            <span className="kol-mono-12 text-fg-64">{year}</span>
-          </div>
-        </div>
-
-        <p className="kol-sans-heading-03 text-auto leading-tight whitespace-nowrap overflow-hidden text-ellipsis">
-          {description}
-        </p>
-      </div>
-    </a>
-  )
-}

package/src/molecules/foundry/SpecimenSectionHeader.jsx

@@ -1,89 +0,0 @@
-import { Icon } from '@kolkrabbi/kol-icons'
-import Dropdown from '../Dropdown.jsx'
-import Divider from '../../atoms/Divider.jsx'
-
-/* taxonomy-ok: nests DS Dropdown + Divider (relative imports) plus kol-icons's
- * Icon (a package import the relative-import check can't see). */
-
-/**
- * SpecimenSectionHeader — the shared header every type-specimen section mounts
- * under. A title (with an optional inline icon) on the left, up to two
- * controlled dropdowns (weight + style/axis) on the right, and a horizontal
- * divider beneath. It is the connective tissue that makes the foundry sections
- * read as one system, so it is built before the sections that consume it.
- *
- * Fully controlled and data-free: it holds no font data, only label/badge text,
- * an icon name, and the two dropdowns' value/onChange pairs supplied by the
- * parent section. Promoted from the monorepo's route-local `FoundrySection`;
- * the `Foundry*` name was a route artifact, this name describes the role.
- *
- * Title source forks: `label` wins, else `badgeText`. `size` swaps the title
- * type stop (`sm` → kol-mono-12, else kol-mono-16). Each dropdown is
- * independently gated; the weight dropdown also requires a non-empty
- * `weightOptions`.
- *
- * Text casing: title and option labels render verbatim as authored — no
- * text-transform. Author "Roman" / "Italic" / "Character Set" in intended case.
- *
- * @param {Object} props
- * @param {string} props.label - Title text (takes precedence over badgeText).
- * @param {string} props.badgeText - Fallback title when label is unset.
- * @param {string} props.icon - KOL Icon name shown after the title; omit to hide.
- * @param {'sm'|'lg'} props.size - Title type stop (default 'lg').
- * @param {string} props.selectedStyle - Controlled value of the style/axis dropdown.
- * @param {Function} props.onStyleChange - Style dropdown change handler.
- * @param {boolean} props.showDropdown - Render the style/axis dropdown (default true).
- * @param {Array<{label,value}>} props.styleOptions - Style dropdown options (default Roman/Italic).
- * @param {string} props.selectedWeight - Controlled value of the weight dropdown.
- * @param {Function} props.onWeightChange - Weight dropdown change handler.
- * @param {boolean} props.showWeightDropdown - Gate the weight dropdown (default true; also needs options).
- * @param {Array<{label,value}>} props.weightOptions - Weight dropdown options (default []).
- */
-const SpecimenSectionHeader = ({
-  label,
-  badgeText,
-  icon,
-  size = 'lg',
-  selectedStyle,
-  onStyleChange,
-  showDropdown = true,
-  styleOptions = [
-    { label: 'Roman', value: 'roman' },
-    { label: 'Italic', value: 'italic' },
-  ],
-  selectedWeight,
-  onWeightChange,
-  showWeightDropdown = true,
-  weightOptions = [],
-}) => {
-  const title = label || badgeText
-  // kol-mono-text-lg / kol-mono-sm-regular don't exist in the DS theme; the
-  // nearest mono stops are kol-mono-16 (lg) and kol-mono-12 (sm).
-  const titleClass = size === 'sm' ? 'kol-mono-12' : 'kol-mono-16'
-
-  return (
-    <div className="flex flex-col gap-[13px]">
-      <div className="w-full flex flex-row justify-between items-end gap-4">
-        {/* Left: title + optional icon */}
-        <div className="flex items-center gap-3 md:gap-4">
-          <span className={titleClass}>{title}</span>
-          {icon && <Icon name={icon} size={20} />}
-        </div>
-
-        {/* Right: controlled dropdowns */}
-        <div className="flex items-center gap-4">
-          {showWeightDropdown && weightOptions.length > 0 && (
-            <Dropdown options={weightOptions} value={selectedWeight} onChange={onWeightChange} />
-          )}
-          {showDropdown && (
-            <Dropdown options={styleOptions} value={selectedStyle} onChange={onStyleChange} />
-          )}
-        </div>
-      </div>
-
-      <Divider variant="horizontal" />
-    </div>
-  )
-}
-
-export default SpecimenSectionHeader

package/src/organisms/ArticleHeader.jsx

@@ -1,95 +0,0 @@
-import Pill from '../atoms/Pill.jsx'
-import Avatar from '../atoms/Avatar.jsx'
-import Image from '../molecules/Image.jsx'
-
-/**
- * ArticleHeader — long-form article masthead: a row of tag Pills, a display
- * title, an author cluster (DS Avatar + name + role), a `date • readingTime`
- * meta line, an optional excerpt, and an optional hero image. Pure
- * presentational composition of a flat prop bag.
- *
- * De-Sanitized: the four embedded Sanity image-URL builders and the
- * `resolveImageUrl` unpacker are gone — `heroImage` is a plain resolved src
- * string handed straight to DS Image (which owns its own missing-asset
- * fallback). The author avatar is the DS Avatar atom (initials), not a
- * hand-rolled `<img>` — so `authorInitial` replaces the Sanity `authorImage`.
- * The app `reveal` entrance utility is dropped.
- *
- * Name and meta render uppercase via a presentational class only — strings are
- * authored as-is at the call site, no JS casing.
- *
- * @param {string[]} tags         Pill labels; row hidden when empty
- * @param {string}   title        display title
- * @param {string}   authorName   author name (rendered uppercase via class)
- * @param {string}   authorTitle  author role/title line
- * @param {string}   authorInitial avatar glyph; defaults to authorName's first char
- * @param {string}   date         publication date text
- * @param {string}   readingTime  reading-time text (prefixed `• ` in the meta line)
- * @param {string}   excerpt      lede paragraph; block hidden when falsy
- * @param {string}   heroImage    resolved hero image src (omit → no hero block)
- * @param {string}   className    extra classes on the <header>
- */
-export default function ArticleHeader({
-  tags = [],
-  title,
-  authorName,
-  authorTitle,
-  authorInitial,
-  date,
-  readingTime,
-  excerpt,
-  heroImage,
-  className = '',
-}) {
-  const initial = authorInitial ?? (authorName ? authorName.trim().charAt(0) : '')
-
-  return (
-    <header className={`pb-12 ${className}`.trim()}>
-      <div className="max-w-[1400px] mx-auto flex flex-col">
-        {tags.length > 0 && (
-          <div className="flex flex-wrap items-center gap-2 pb-6">
-            {tags.map((tag, i) => (
-              <Pill key={i} variant="inverse" size="md">{tag}</Pill>
-            ))}
-          </div>
-        )}
-
-        <div className="flex flex-col gap-6">
-          <h1 className="kol-prose-title text-balance">{title}</h1>
-
-          <div className="flex flex-wrap items-center gap-6 text-fg-64 pb-3">
-            <div className="flex items-center gap-4">
-              <Avatar initial={initial} size="lg" />
-              <div className="flex flex-col">
-                <span className="kol-helper-12 uppercase text-fg-48">{authorName}</span>
-                <span className="kol-mono-12 text-fg-64">{authorTitle}</span>
-              </div>
-            </div>
-            <div className="flex items-center gap-3 kol-helper-12 uppercase text-fg-48">
-              <span>{date}</span>
-              {readingTime && <span>• {readingTime}</span>}
-            </div>
-          </div>
-
-          {excerpt && (
-            <div className="pb-4 w-full lg:w-[80%]">
-              <p className="kol-mono-14 text-fg-64">{excerpt}</p>
-            </div>
-          )}
-
-          {heroImage && (
-            <div className="rounded overflow-hidden border border-fg-08">
-              <Image
-                src={heroImage}
-                alt=""
-                loading="eager"
-                className="object-cover"
-                style={{ width: '100%', aspectRatio: '4/2', objectFit: 'cover' }}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-    </header>
-  )
-}