@kolkrabbi/kol-component 0.131.0 → 0.132.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.131.0",
+  "version": "0.132.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

@@ -82,8 +82,6 @@ export { default as Dropdown } from './molecules/Dropdown.jsx'
 export { default as FieldRow, StatusChip } from './molecules/FieldRow.jsx'
 export { default as FramedMediaBand } from './organisms/FramedMediaBand.jsx'
 export { default as Image } from './atoms/Image.jsx'
-export { default as MediaCard } from './molecules/MediaCard.jsx'
-export { default as MediaRow } from './molecules/MediaRow.jsx'
 
 /* content-card system (2026-08-15) — the ruled card/row family:
  * docs/documentation/03-components/06-content-card-system.md */

package/src/molecules/MediaCard.jsx

@@ -1,103 +0,0 @@
-import { Icon } from '@kolkrabbi/kol-icons'
-
-/* taxonomy-ok: nests kol-icons's Icon (a package import the relative-import
- * check can't see) plus the same-file SelectIndicator. */
-
-/**
- * @deprecated 2026-08-26 — absorbed by `ContentCard variant="default"` in @kolkrabbi/kol-component
- * (the Content Set, 2026-08-15). Step 1 of the retirement wave: this export
- * stays and renders unchanged until the next major, then it is removed.
- * Consumers: swap on your next bump. Map + row-by-row diff:
- * docs/documentation/03-components/06-content-card-system.md.
- *
- * SelectIndicator — passive square check indicator for multi-select rows and
- * cards. `on` = checked. Deliberately NOT ToggleCheckbox: that is a labeled
- * form control with a real <input>, which double-fires inside a click-target
- * card and misleads assistive tech — here the CARD is the toggle, this is
- * only its visual state. Inline CSS vars because `bg-fg-default` isn't a
- * generated Tailwind utility; the checked fill reads from
- * `--kol-surface-on-primary` (solid fg, theme-correct).
- *
- * Shared by MediaCard and MediaRow; not exported from the package barrel.
- */
-export function SelectIndicator({ on = false }) {
-  return (
-    <span
-      className="w-4 h-4 shrink-0 rounded-sm border flex items-center justify-center transition-colors"
-      style={
-        on
-          ? { background: 'var(--kol-surface-on-primary)', borderColor: 'var(--kol-surface-on-primary)' }
-          : { background: 'var(--kol-fg-ab-16, rgba(0,0,0,0.15))', borderColor: 'var(--kol-fg-ab-48, rgba(0,0,0,0.4))' }
-      }
-      aria-hidden="true"
-    >
-      {on && <Icon name="check" size={11} style={{ color: 'var(--kol-surface-primary)' }} />}
-    </span>
-  )
-}
-
-/**
- * MediaCard — grid tile for one media object: square thumbnail with a
- * top-right download overlay (or a top-left select checkbox in select mode),
- * then name / meta / actions stacked below. The grid-view counterpart to
- * MediaRow (same slot contract).
- *
- * Presentational — the parent supplies rendered slots; no media loading,
- * fetch, or rename logic lives here. Grid track sizing belongs to the parent
- * list; the card just fills its cell.
- *
- * @param {ReactNode} thumb        square thumbnail (image/video/placeholder)
- * @param {ReactNode} name         name cell (plain text or an inline editor)
- * @param {string}    meta         one-line secondary text (e.g. "1.2 MB · 2026-06-19")
- * @param {ReactNode} actions      row of action buttons (hidden in select mode)
- * @param {string}    downloadHref href for the overlay download button (omit to hide)
- * @param {boolean}   selectMode   selection mode on → checkbox replaces download, whole card toggles
- * @param {boolean}   selected     this card is selected (stronger border + checked box)
- * @param {Function}  onSelect     (event) => void — card click in select mode; gets shiftKey for range
- */
-export default function MediaCard({
-  thumb,
-  name,
-  meta,
-  actions,
-  downloadHref,
-  selectMode = false,
-  selected = false,
-  onSelect,
-}) {
-  return (
-    <li
-      onClick={selectMode ? onSelect : undefined}
-      className={`flex flex-col rounded overflow-hidden border bg-fg-02 ${selectMode ? 'cursor-pointer select-none' : ''}`}
-      style={{ borderColor: selected ? 'var(--kol-fg-64)' : 'var(--kol-fg-12)' }}
-    >
-      <div className="aspect-square relative">
-        {thumb}
-        {selectMode ? (
-          <span
-            className="kol-frame-control kol-frame-control--top-left rounded p-1"
-            style={{ background: 'var(--kol-fg-ab-12, rgba(0,0,0,0.4))', backdropFilter: 'blur(4px)' }}
-          >
-            <SelectIndicator on={selected} />
-          </span>
-        ) : downloadHref ? (
-          <a
-            href={downloadHref}
-            aria-label="Download"
-            title="Download"
-            className="kol-frame-control inline-flex items-center justify-center w-8 h-8 rounded text-emphasis hover:bg-fg-ab-24 transition-colors"
-            style={{ background: 'var(--kol-fg-ab-12, rgba(0,0,0,0.4))', backdropFilter: 'blur(4px)' }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <Icon name="download" size={16} />
-          </a>
-        ) : null}
-      </div>
-      <div className="p-3 flex flex-col gap-2">
-        {name}
-        <p className="kol-mono-12 text-fg-48">{meta}</p>
-        {!selectMode && actions}
-      </div>
-    </li>
-  )
-}

package/src/molecules/MediaRow.jsx

@@ -1,55 +0,0 @@
-import { SelectIndicator } from './MediaCard.jsx'
-
-/**
- * @deprecated 2026-08-26 — absorbed by `ContentRow variant="default"` in @kolkrabbi/kol-component
- * (the Content Set, 2026-08-15). Step 1 of the retirement wave: this export
- * stays and renders unchanged until the next major, then it is removed.
- * Consumers: swap on your next bump. Map + row-by-row diff:
- * docs/documentation/03-components/06-content-card-system.md.
- *
- * MediaRow — list row for one media object: optional select checkbox, small
- * thumbnail, name (flex), fixed-width date + size columns, then actions.
- * The list-view counterpart to MediaCard (same slot contract).
- *
- * Presentational — the parent supplies rendered slots; interaction outside
- * select mode lives in the thumb / name / actions slots. Column widths are
- * consumer-tunable via `dateWidth` / `sizeWidth`.
- *
- * @param {ReactNode} thumb       small thumbnail (48px square)
- * @param {ReactNode} name        name cell (plain text or an inline editor)
- * @param {string}    date        right-aligned date column
- * @param {string}    size        right-aligned size column
- * @param {ReactNode} actions     row of action buttons (hidden in select mode)
- * @param {string}    dateWidth   Tailwind width class for the date column
- * @param {string}    sizeWidth   Tailwind width class for the size column
- * @param {boolean}   selectMode  selection mode on → checkbox shown, whole row toggles, actions hidden
- * @param {boolean}   selected    this row is selected (highlight + checked box)
- * @param {Function}  onSelect    (event) => void — row click in select mode; gets shiftKey for range
- */
-export default function MediaRow({
-  thumb,
-  name,
-  date,
-  size,
-  actions,
-  dateWidth = 'w-24',
-  sizeWidth = 'w-20',
-  selectMode = false,
-  selected = false,
-  onSelect,
-}) {
-  return (
-    <li
-      onClick={selectMode ? onSelect : undefined}
-      className={`flex items-center gap-3 py-2 border-b ${selectMode ? 'cursor-pointer select-none' : ''} ${selected ? 'bg-fg-08' : ''}`}
-      style={{ borderColor: 'var(--kol-fg-08)' }}
-    >
-      {selectMode && <SelectIndicator on={selected} />}
-      <div className="w-12 h-12 shrink-0 rounded overflow-hidden">{thumb}</div>
-      <div className="flex-1 min-w-0">{name}</div>
-      <p className={`kol-mono-12 text-fg-32 shrink-0 text-right ${dateWidth}`}>{date}</p>
-      <p className={`kol-mono-12 text-fg-48 shrink-0 text-right ${sizeWidth}`}>{size}</p>
-      {!selectMode && <div className="shrink-0">{actions}</div>}
-    </li>
-  )
-}