@kolkrabbi/kol-component 0.27.0 → 0.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.27.0",
+  "version": "0.28.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/molecules/FieldRow.jsx

@@ -1,8 +1,10 @@
 import { useState } from 'react'
+import { Icon } from '@kolkrabbi/kol-icons'
 import Input from '../atoms/Input'
 import Tag from '../atoms/Tag'
 import Button from '../atoms/Button'
 import { usePopover, PopoverPanel } from '../atoms/Popover'
+import { INDICATOR } from '../hooks/glyphLadders.js'
 import Dropdown from './Dropdown'
 
 /**
@@ -23,11 +25,19 @@ import Dropdown from './Dropdown'
  * object back through onChange untouched.
  */
 
-/* StatusChip — the interactive status control ("Live ▾" in the reference).
+/* StatusChip — the interactive status control ("Live ▾" in the reference,
+ * rebuilt to it 2026-08-09 after the user's screenshots: the chip carries a
+ * TONE tint + a trailing caret at the INDICATOR rung, and the open panel is
+ * the reference's grammar — current chip on top, hairline, then option rows
+ * with a leading check column).
  * Chip taxonomy (Tag source, 2026-07-30): interactive → Tag, never Pill. The
  * menu is usePopover/PopoverPanel — the same primitive Dropdown builds on —
  * with click handled by the Tag itself (click: false here) so the chip stays
- * the only trigger. Shared by FieldRow and RecordManager's status column. */
+ * the only trigger. Shared by FieldRow and RecordManager's status column.
+ *
+ * Options: strings, or { value, label, tone } — tone ∈ success|warning|error|
+ * info maps onto the --ui-* ladder (.kol-status-chip--* in kol-theme); the
+ * chip wears the ACTIVE option's tone. No tone → the plain Tag look. */
 export function StatusChip({ value, options = [], onChange, size = 'sm' }) {
   const [open, setOpen] = useState(false)
   const popover = usePopover({
@@ -37,30 +47,58 @@ export function StatusChip({ value, options = [], onChange, size = 'sm' }) {
     click: false,
     role: 'listbox',
   })
+  const norm = options.map((opt) => (typeof opt === 'object' ? opt : { value: opt, label: opt }))
+  const activeOpt = norm.find((o) => o.value === value)
+  const toneCls = activeOpt?.tone ? ` kol-status-chip--${activeOpt.tone}` : ''
+  const chip = (interactive) => (
+    <Tag
+      variant="primary"
+      size={size}
+      hash={false}
+      active={interactive && open}
+      className={`kol-status-chip${toneCls}`}
+      onClick={interactive ? () => setOpen((o) => !o) : undefined}
+    >
+      {activeOpt?.label ?? value}
+      {interactive && (
+        <Icon
+          name="chevron-down"
+          size={INDICATOR[size] ?? INDICATOR.sm}
+          className={`transition-transform duration-150${open ? ' rotate-180' : ''}`}
+          aria-hidden="true"
+        />
+      )}
+    </Tag>
+  )
   return (
     <>
       <span ref={popover.refs.setReference} {...popover.getReferenceProps()} className="inline-flex">
-        <Tag variant="primary" size={size} hash={false} active={open} onClick={() => setOpen((o) => !o)}>
-          {value}
-        </Tag>
+        {chip(true)}
       </span>
       <PopoverPanel popover={popover}>
+        {/* the reference panel: current value as its chip, a hairline, then
+          * the option rows — check column always reserved so labels align */}
+        <div className="px-2 pt-2">{chip(false)}</div>
+        <div className="mt-2 border-t border-fg-08" />
         <ul className="flex flex-col p-1 m-0 list-none">
-          {options.map((opt) => {
-            const label = typeof opt === 'object' ? opt.label : opt
-            const val = typeof opt === 'object' ? opt.value : opt
+          {norm.map(({ value: val, label }) => {
             return (
               <li key={val}>
                 <button
                   type="button"
                   role="option"
                   aria-selected={val === value}
-                  className={`kol-helper-12 w-full text-left px-3 py-2 bg-transparent border-0 cursor-pointer rounded-sm hover:bg-fg-08 ${val === value ? 'text-emphasis' : 'text-body'}`}
+                  className={`kol-helper-12 w-full text-left pr-3 py-2 bg-transparent border-0 cursor-pointer rounded-sm hover:bg-fg-08 inline-flex items-center ${val === value ? 'text-emphasis' : 'text-body'}`}
                   onClick={() => {
                     onChange?.(val)
                     setOpen(false)
                   }}
                 >
+                  {/* check column always reserved — labels align whether or
+                    * not a row carries the mark (reference grammar) */}
+                  <span className="inline-flex w-7 shrink-0 justify-center" aria-hidden="true">
+                    {val === value && <Icon name="check" size={12} />}
+                  </span>
                   {label}
                 </button>
               </li>
@@ -96,7 +134,10 @@ export default function FieldRow({
   let control = null
   if (type === 'text') {
     control = (
+      /* sm — record rows are compact chrome (the reference's density); md
+       * read as a form field ("input is large? why?", 2026-08-09). */
       <Input
+        size="sm"
         value={value ?? ''}
         onChange={(e) => onChange?.(e?.target ? e.target.value : e)}
         placeholder={placeholder}

package/src/organisms/RecordManager.jsx

@@ -184,10 +184,13 @@ export default function RecordManager({
         render: (row) => {
           const i = rows.indexOf(row)
           return (
+            {/* REST-VISIBLE (2026-08-09 — "Im looking for this handle"): the
+              * reference draws the grip dim at rest; hover-only hid the whole
+              * reorder affordance. */}
             <button
               type="button"
               aria-label={reorderLabel(i + 1)}
-              className="cursor-grab touch-none bg-transparent border-0 p-0 text-meta hover:text-emphasis opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
+              className="cursor-grab touch-none bg-transparent border-0 p-0 text-meta hover:text-emphasis"
               onPointerDown={(e) => startDrag(e, i)}
             >
               <Icon name="resize-grip" size={14} />
@@ -243,6 +246,11 @@ export default function RecordManager({
               className="ml-2"
             />
           )}
+          {/* trailing overflow — the reference toolbar's far-right … (surface
+            * scope: called with null, vs the drawer header's per-record call) */}
+          {onOverflow && (
+            <Button variant="nav" size="md" iconOnly="more" iconSize={14} className="ml-auto" onClick={() => onOverflow(null)} aria-label="More" />
+          )}
         </div>
       )}