@kolkrabbi/kol-component 0.4.0 → 0.5.0

package/README.md

@@ -15,7 +15,7 @@ Requires a **Vite + Tailwind v4** app and the theme CSS imported (see the theme
 
 ```jsx
 import { Button, Tag, Badge, Slider, Dropdown, Table } from '@kolkrabbi/kol-component'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 <Button variant="primary" iconLeft="plus">New</Button>
 <Badge variant="success">Active</Badge>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
-    "@kolkrabbi/kol-loader": "0.3.0"
+    "@kolkrabbi/kol-icons": "0.4.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/atoms/Badge.jsx

@@ -5,7 +5,7 @@
  * CSS classes live in components.css under 2-LABELS → Badges.
  */
 
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 const VARIANT_MAP = {
   default: 'kol-badge-default',

package/src/atoms/Button.jsx

@@ -1,5 +1,5 @@
 import { isValidElement } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
  * Button — canonical KOL button. Emits kol-btn* classes (CSS in @kol/theme).

package/src/atoms/Input.jsx

@@ -1,4 +1,4 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
  * Input — single-input atom built on the .kol-control shell.

package/src/atoms/SearchInput.jsx

@@ -1,4 +1,4 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
  * SearchInput — controlled search field on the .kol-control shell. The

package/src/atoms/SectionLabel.jsx

@@ -1,4 +1,4 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 export default function SectionLabel({
   text,

package/src/atoms/SegmentedToggle.jsx

@@ -26,15 +26,16 @@
  *   value     — current option value
  *   onChange  — handler (newValue) => void
  *   options   — [{ value, label, ariaLabel? }]
- *   size      — 'md' (default, 26px) | 'sm' (16px). `sm` is for icon/preview-
- *               only options (e.g. line-style previews) where text labels
- *               aren't used; the cells still center their contents but the
- *               outer height is tighter.
+ *   size      — mirrors Button exactly: 'sm' (26px, mono-12, 4/12 pad) |
+ *               'md' (default, 32px, mono-14, 6/16 pad) | 'lg' (40px,
+ *               mono-16, 8/20 pad). Same cell padding + mono type as the
+ *               matching `.kol-btn-{sm,md,lg}`, so a segmented strip lines
+ *               up with a Button of the same size.
  *   ariaLabel — accessible name for the group
  *   className — additional classes on the outer shell
  */
 export default function SegmentedToggle({ value, onChange, options = [], size = 'md', ariaLabel, className = '' }) {
-  const cellType = size === 'sm' ? '' : 'kol-mono-12'
+  const cellType = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }[size]
   const focusIdx = Math.max(0, options.findIndex((opt) => opt.value === value))
 
   const handleKeyDown = (e) => {
@@ -51,7 +52,7 @@ export default function SegmentedToggle({ value, onChange, options = [], size =
       role="radiogroup"
       aria-label={ariaLabel}
       onKeyDown={handleKeyDown}
-      className={['kol-seg', size === 'sm' && 'kol-seg--sm', className].filter(Boolean).join(' ')}
+      className={['kol-seg', size !== 'md' && `kol-seg--${size}`, className].filter(Boolean).join(' ')}
     >
       {options.map((opt, i) => {
         const isActive = opt.value === value

package/src/atoms/Stepper.jsx

@@ -8,7 +8,7 @@
  * stroke icons in the kol curated set. For a plain number input without
  * bump affordance, use `<Input type="number" />`.
  */
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 const SIZE_TYPE    = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
 const CHEVRON_SIZE = { sm: 8,             md: 10,            lg: 12 }

package/src/atoms/Tag.jsx

@@ -1,4 +1,4 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 const ICON_SIZES = { sm: 10, md: 12, lg: 14 }
 

package/src/atoms/Textarea.jsx

@@ -1,4 +1,4 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
  * Textarea — multi-line text atom built on the .kol-control shell with the

package/src/atoms/ViewToggle.jsx

@@ -1,4 +1,4 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
  * ViewToggle — control for switching between view modes.

package/src/graphics/Graphic.jsx

@@ -6,7 +6,7 @@
  *
  * The raw SVG strings (~4.8 MB) live in ./graphicData.js behind a single
  * dynamic import — their chunk streams in parallel with boot instead of
- * bloating the consumer's entry chunk (same pattern as kol-loader's Icon).
+ * bloating the consumer's entry chunk (same pattern as kol-icons's Icon).
  * Until the chunk lands, renders a sized empty box (no layout shift); a
  * genuinely missing asset renders an AssetPlaceholder so it's visible rather
  * than silently empty.

package/src/graphics/graphicData.js

@@ -4,7 +4,7 @@
  * ~4.8 MB of illustration SVGs (some wrap embedded raster images) eager-inline
  * here, but this module is only reached via the dynamic `import()` in
  * Graphic.jsx — the bundler splits it into its own async chunk instead of
- * folding it into the consumer's entry chunk. Same pattern as kol-loader's
+ * folding it into the consumer's entry chunk. Same pattern as kol-icons's
  * iconData.js (kol-labs-single 2026-06-19 entry-chunk fix).
  */
 const svgModules = import.meta.glob('./svg/**/*.svg', { eager: true, query: '?raw', import: 'default' })

package/src/index.js

@@ -7,7 +7,7 @@
  *
  * Placement follows the taxonomy rules in
  * docs/documentation/02-components/02-placement.md:
- *   atom     — nests no KOL component (kol-loader Icon/Graphic are
+ *   atom     — nests no KOL component (kol-icons Icon/Graphic are
  *              infrastructure, they don't count)
  *   molecule — nests at least one KOL component
  *   organism — a self-contained composed UI region
@@ -124,7 +124,7 @@ export { default as SpectrumGrid } from './organisms/SpectrumGrid.jsx'
 export { default as Table } from './organisms/Table.jsx'
 
 // loaders (re-export — infrastructure, documented on /docs/loaders)
-export { Icon } from '@kolkrabbi/kol-loader'
+export { Icon } from '@kolkrabbi/kol-icons'
 
 // graphics (SVG illustration loader — globs its own ./graphics/svg/**)
 export { default as Graphic, GRAPHICS } from './graphics/Graphic.jsx'

package/src/molecules/CardFeatureItem.jsx

@@ -1,6 +1,6 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
-/* taxonomy-ok: nests only kol-loader's Icon (a package import the
+/* taxonomy-ok: nests only kol-icons's Icon (a package import the
  * relative-import check can't see). */
 
 /**

package/src/molecules/ColorInputRow.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import ColorSwatch from './ColorSwatch'
 import Input from '../atoms/Input'
 import LabeledControl from '../atoms/LabeledControl'

package/src/molecules/Dropdown.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import { MenuDropdownItem } from './MenuItem.jsx'
 import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
 

package/src/molecules/MediaCard.jsx

@@ -1,6 +1,6 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
-/* taxonomy-ok: nests kol-loader's Icon (a package import the relative-import
+/* taxonomy-ok: nests kol-icons's Icon (a package import the relative-import
  * check can't see) plus the same-file SelectIndicator. */
 
 /**

package/src/molecules/MenuItem.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
 
 /**

package/src/molecules/ShapeDropdown.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
 import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
 import { MenuDropdownItem } from './MenuItem.jsx'

package/src/molecules/ShellDrawer.jsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
 
-/* taxonomy-ok: nests kol-loader's Icon (a package import the relative-import
+/* taxonomy-ok: nests kol-icons's Icon (a package import the relative-import
  * check can't see). */
 
 const FOCUSABLE =

package/src/molecules/SwatchControls.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import ColorSwatch from './ColorSwatch.jsx'
 
 /* taxonomy-ok: the default composed control nests the same-file SwatchStack

package/src/molecules/TabsRow.jsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
-/* taxonomy-ok: nests kol-loader's Icon */
+/* taxonomy-ok: nests kol-icons's Icon */
 
 /**
  * TabsRow — labeled underline tab strip: text tabs where the active tab gets

package/src/molecules/foundry/SpecimenSectionHeader.jsx

@@ -1,8 +1,8 @@
-import { Icon } from '@kolkrabbi/kol-loader'
+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-loader's
+/* taxonomy-ok: nests DS Dropdown + Divider (relative imports) plus kol-icons's
  * Icon (a package import the relative-import check can't see). */
 
 /**

package/src/organisms/ContentFilters.jsx

@@ -1,7 +1,7 @@
 import { useState, useMemo, useRef, useEffect } from 'react'
 import Tag from '../atoms/Tag.jsx'
 import Divider from '../atoms/Divider.jsx'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import ViewToggle from '../atoms/ViewToggle'
 
 /**

package/src/organisms/MediaViewer.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 import FullscreenOverlay from '../atoms/FullscreenOverlay.jsx'
 
 /**

package/src/organisms/WorkViewToggle.jsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-loader'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /* taxonomy-ok: composites a segmented toggle + an inline search into one
- * space-trading control (organism); nests kol-loader's Icon (infrastructure). */
+ * space-trading control (organism); nests kol-icons's Icon (infrastructure). */
 
 const CUBIC_EASE = 'cubic-bezier(0.16, 1, 0.3, 1)'
 /* The pill uses a springier overshoot ease, distinct from CUBIC_EASE. */