@kolkrabbi/kol-component 0.153.0 → 0.154.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.153.0",
+  "version": "0.154.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/index.js

@@ -148,6 +148,7 @@ export { default as PlaybackBar } from './molecules/PlaybackBar.jsx'
 export { default as AudioSheet } from './molecules/AudioSheet.jsx'
 export { default as DocPage } from './molecules/DocPage.jsx'
 export { default as DocFrontmatter } from './molecules/DocFrontmatter.jsx'
+export { default as ProfileCard } from './molecules/ProfileCard.jsx'
 export { parseFrontmatter } from './utilities/frontmatter.js'
 export { readCover } from './utilities/id3.js'
 export { kindOf, extOf, isSystemFile, KINDS, KIND_LABEL, DEFAULT_KINDS, isSegment, groupSegments, groupVariants, posterFor, partition } from './utilities/mediaKinds.js'

package/src/molecules/ProfileCard.jsx

@@ -0,0 +1,204 @@
+import { useId, useState } from 'react'
+import { Icon } from '@kolkrabbi/kol-icons'
+import IconFrame from '../atoms/IconFrame.jsx'
+import { Tooltip } from '../utilities/Popover.jsx'
+
+/* taxonomy-ok: nests kol-icons's Icon (a package import the relative-import
+ * check can't see). */
+
+/**
+ * ProfileCard — the digital namecard (ProfileCard, kol-website 2026-09-01;
+ * carried class-for-class from `apps/web/src/components/ui/ProfileCard.jsx`):
+ * a square photo with a disclosure control inset on it, and a SHELF that opens
+ * under it (vertical) or beside it (horizontal) — logo, name, mailto, a rack of
+ * socials. The shelf is `bg-surface-inverse` / `text-auto-inverse` at every
+ * theme: the inverse of the page is the design, not a bug.
+ *
+ * THE SHELF SIZES TO ITS CONTENT. The source held it in a fixed box
+ * (`h-60`/`h-44`/`h-32`/`h-24`, `overflow-hidden`) and every vertical size
+ * clipped its own socials rack on a phone — lg needed 204px inside 176, sm 140
+ * inside 96. The consumer patched a `min-h` floor under a raised `max-height`
+ * ceiling; that is two guesses at one number. Here the open state animates
+ * `grid-template-rows: 0fr → 1fr` — the browser measures, nothing is guessed,
+ * and a sixth social or a longer name never clips. Horizontal keeps the user's
+ * 2026-08-27 ruling — the CARD holds a fixed square and the PHOTO crops as the
+ * shelf comes in — as `grid-template-columns: 0px → 224px`, ONE number where
+ * the source carried three (`w-56`, `'320px'`, an inline `'224px'` — only the
+ * last was ever read).
+ *
+ * SCALE AND WIDTH ARE SEPARATE. `size` drives the ramp — logo height, mono
+ * step, glyph size, rack gap, control inset — and caps the width
+ * (`max-w-[680/480/320/200]`); the card is `w-full` inside that cap, so a
+ * caller's `className="w-full"` no longer fights a second width utility.
+ *
+ * THE DISCLOSURE IS A BUTTON, NOT A SWITCH. The source opened the shelf with
+ * `ToggleSwitch` — a form control that states a persistent setting, used for a
+ * reveal that sets nothing. Ruling applied here rather than minted as a second
+ * component: a disclosure is a button carrying `aria-expanded` +
+ * `aria-controls`, `plus` closed / `minus` open. Over MEDIA it is
+ * `IconFrame variant="secondary" radius="full"` — the glyph needs a surface
+ * (the bare `nav` glyph was measured invisible over the photo: page ink on a
+ * dark picture); on a surface the bare `nav` idiom the close X standardised
+ * on (FullscreenOverlayCloseIdiom) is the same ruling with no frame.
+ *
+ * Brand content is the CONSUMER'S: `logo` is a slot (the source baked
+ * `kol-brand`'s lockup, which this package cannot import), `name` / `email` /
+ * `socials` are props with no defaults.
+ *
+ * @param {string}    image        photo URL — square, `object-cover object-top`
+ * @param {string}    alt          the photo's alt (default: `name`)
+ * @param {ReactNode} logo         the lockup — sized by the ramp (`[&>svg]:h-full`), `text-auto-inverse`
+ * @param {string}    name         the person
+ * @param {string}    email        rendered as a `mailto:`
+ * @param {Array}     socials      `[{ icon, href, label }]` — one Icon-in-Tooltip each, external links
+ * @param {'xl'|'lg'|'md'|'sm'} size  the ramp + width cap (680 · 480 · 320 · 200); default xl
+ * @param {'vertical'|'horizontal'} orientation  shelf under the photo (card grows) or beside it (card holds its square, photo crops)
+ * @param {string}    variant      alias for the source's names — `'lg-h'` = `size="lg" orientation="horizontal"`, any other value = `size`
+ * @param {boolean}   open         controlled open state
+ * @param {boolean}   defaultOpen  uncontrolled initial state (default false)
+ * @param {Function}  onOpenChange `(open) => void`
+ * @param {string}    className    extra classes on the card
+ */
+
+const SIZES = {
+  xl: { cap: 'max-w-[680px]', pad: 'p-6', logo: 'h-20', text: 'kol-mono-16', iconSize: 24, iconBox: 'w-8 h-8', iconGap: 'gap-2', control: 'bottom-4 left-4' },
+  lg: { cap: 'max-w-[480px]', pad: 'p-5', logo: 'h-14', text: 'kol-mono-14', iconSize: 20, iconBox: 'w-7 h-7', iconGap: 'gap-1.5', control: 'bottom-3 left-3' },
+  md: { cap: 'max-w-[320px]', pad: 'p-4', logo: 'h-10', text: 'kol-mono-12', iconSize: 16, iconBox: 'w-6 h-6', iconGap: 'gap-1', control: 'bottom-3 left-3' },
+  sm: { cap: 'max-w-[200px]', pad: 'p-3', logo: 'h-7', text: 'kol-mono-10', iconSize: 12, iconBox: 'w-5 h-5', iconGap: 'gap-1', control: 'bottom-2 left-2' },
+}
+/* the source's `lg-h`: lg's ramp with a 16px glyph in a 24 box, p-4, and the
+ * one open-shelf width */
+const HORIZONTAL = { pad: 'p-4', iconSize: 16, iconBox: 'w-6 h-6', shelf: 224 }
+const SHADOW = '0 112px 192px -80px rgba(0,0,0,0.6)'
+
+export default function ProfileCard({
+  image,
+  alt,
+  logo,
+  name,
+  email,
+  socials = [],
+  size = 'xl',
+  orientation = 'vertical',
+  variant,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  className = '',
+}) {
+  /* the alias maps and gains nothing (gate R4) */
+  const horizontal = variant === 'lg-h' || (variant == null && orientation === 'horizontal')
+  const s = SIZES[variant === 'lg-h' ? 'lg' : (variant ?? size)] ?? SIZES.xl
+  const ramp = horizontal ? { ...s, ...HORIZONTAL } : s
+
+  const [localOpen, setLocalOpen] = useState(defaultOpen)
+  const isOpen = open ?? localOpen
+  const setOpen = (next) => {
+    if (open == null) setLocalOpen(next)
+    onOpenChange?.(next)
+  }
+  const shelfId = useId()
+
+  const control = (
+    <div className={`absolute ${ramp.control}`}>
+      <IconFrame
+        name={isOpen ? 'minus' : 'plus'}
+        variant="secondary"
+        size="md"
+        radius="full"
+        aria-expanded={isOpen}
+        aria-controls={shelfId}
+        aria-label={isOpen ? 'Hide contact details' : 'Show contact details'}
+        onClick={() => setOpen(!isOpen)}
+      />
+    </div>
+  )
+  const photo = (
+    <img src={image} alt={alt ?? name ?? ''} className="w-full h-full object-cover object-top" loading="lazy" />
+  )
+  const lockup = logo != null && (
+    <div className={`inline-flex ${ramp.logo} text-auto-inverse [&>svg]:h-full [&>svg]:w-auto`}>{logo}</div>
+  )
+  const contact = (
+    <div className={`flex flex-col ${horizontal ? 'gap-1.5' : 'gap-1'} antialiased`} style={{ lineHeight: 1 }}>
+      {name && <span className={`${ramp.text} text-auto-inverse`}>{name}</span>}
+      {email && (
+        <a
+          href={`mailto:${email}`}
+          className={`${ramp.text} text-auto-inverse underline decoration-2 decoration-transparent hover:decoration-current transition-all`}
+        >
+          {email}
+        </a>
+      )}
+    </div>
+  )
+  const rack = (
+    <div className={`flex ${horizontal ? 'flex-row' : 'flex-col items-start'} ${ramp.iconGap}`}>
+      {socials.map(({ icon, href, label }) => (
+        <Tooltip key={icon} label={label}>
+          <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={label}
+            className={`${ramp.iconBox} flex items-center justify-center text-auto-inverse transition-transform hover:scale-125`}
+          >
+            <Icon name={icon} size={ramp.iconSize} />
+          </a>
+        </Tooltip>
+      ))}
+    </div>
+  )
+
+  if (horizontal) {
+    return (
+      <div
+        className={`grid w-full aspect-square rounded overflow-hidden transition-[grid-template-columns] duration-300 ease-in-out ${className}`}
+        style={{ gridTemplateColumns: `${isOpen ? HORIZONTAL.shelf : 0}px minmax(0, 1fr)`, boxShadow: SHADOW }}
+      >
+        {/* Shelf — LEFT. The inner column holds the open width so the text does
+          * not reflow while the track animates. */}
+        <div id={shelfId} className="min-w-0 overflow-hidden bg-surface-inverse">
+          <div className={`h-full ${ramp.pad} flex flex-col justify-between items-start`} style={{ width: HORIZONTAL.shelf }}>
+            {lockup}
+            <div className="flex flex-col gap-8">
+              {contact}
+              {rack}
+            </div>
+          </div>
+        </div>
+        {/* Photo — RIGHT: crops as the shelf comes in, the card never moves */}
+        <div className="relative min-w-0 h-full overflow-hidden bg-surface-secondary">
+          {photo}
+          {control}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`w-full ${ramp.cap} rounded overflow-hidden ${className}`} style={{ boxShadow: SHADOW }}>
+      {/* Photo — square */}
+      <div className="relative w-full aspect-square overflow-hidden bg-surface-secondary">
+        {photo}
+        {control}
+      </div>
+      {/* Shelf — content-sized: the row track animates 0fr → 1fr and the browser
+        * measures; `min-h-0 overflow-hidden` on the item is what lets 0fr close */}
+      <div
+        className="grid transition-[grid-template-rows] duration-300 ease-in-out"
+        style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}
+      >
+        <div id={shelfId} className="min-h-0 overflow-hidden bg-surface-inverse">
+          <div className={`${ramp.pad} flex justify-between items-end`}>
+            <div className="self-stretch flex flex-col justify-between items-start">
+              {lockup}
+              {contact}
+            </div>
+            {rack}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}