@kolkrabbi/kol-component 0.10.0 → 0.10.1

package/package.json

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

package/src/atoms/AssetPlaceholder.jsx

@@ -10,7 +10,7 @@ export default function AssetPlaceholder({
   category,
   name,
   aspectRatio = '16 / 9',
-  note = 'missing',
+  note = 'MISSING',
   className = '',
 }) {
   const label = [category, name].filter(Boolean).join(' · ')
@@ -23,7 +23,8 @@ export default function AssetPlaceholder({
     >
       {/* note is single-line → helper scale; label can wrap (category · name
         * in a narrow tile) → line-height-bearing mono scale */}
-      <span className="kol-asset-placeholder-note kol-helper-12 uppercase [letter-spacing:0.12em] text-fg-48">{note}</span>
+      {/* no text-transform (casing law) — note is authored in-case */}
+      <span className="kol-asset-placeholder-note kol-helper-12 [letter-spacing:0.12em] text-fg-48">{note}</span>
       {label && <span className="kol-asset-placeholder-label kol-mono-12 text-fg-40 [letter-spacing:0.04em]">{label}</span>}
     </div>
   )

package/src/atoms/Input.jsx

@@ -25,7 +25,6 @@ import { Icon } from '@kolkrabbi/kol-icons'
  *     the shell at text-meta. aria-hidden — affordances, not labels.
  *   iconLeft — name of a leading icon rendered inside the shell (e.g.
  *     "search-16"). iconSize overrides the size-derived default.
- *   uppercase — adds Tailwind `uppercase` to the input element only.
  *
  * Chrome (bg/border/padding/transition/disabled) comes from .kol-control;
  * Input owns prefix/suffix/icon layout + the inner <input> styling.
@@ -47,7 +46,6 @@ export default function Input({
   iconSize = null,
   placeholder,
   disabled = false,
-  uppercase = false,
   width,
   className = '',
   inputClassName = '',
@@ -86,7 +84,6 @@ export default function Input({
      * the affordance than to the empty edge, reads off-balance. */
     prefix !== undefined && 'pr-1',
     suffix !== undefined && 'pl-1',
-    uppercase && 'uppercase',
     isNumber && 'hide-number-spinners',
     inputClassName,
   ].filter(Boolean).join(' ')

package/src/atoms/LabeledControl.jsx

@@ -44,7 +44,7 @@ export default function LabeledControl({
       <div className={`flex items-center gap-3 ${className}`}>
         {showLabel && (
           <span
-            className="kol-helper-10 uppercase tracking-widest text-meta shrink-0"
+            className="kol-helper-10 tracking-widest text-meta shrink-0"
             style={{ width: labelWidth }}
           >
             {labelInner}
@@ -58,7 +58,7 @@ export default function LabeledControl({
   return (
     <div className={`flex flex-col gap-2 ${className}`}>
       {showLabel && (
-        <span className="kol-helper-10 uppercase tracking-widest text-meta">{labelInner}</span>
+        <span className="kol-helper-10 tracking-widest text-meta">{labelInner}</span>
       )}
       {children}
     </div>

package/src/atoms/Section.jsx

@@ -8,7 +8,7 @@ export default function Section({ label, children, className = '' }) {
   return (
     <div className={`flex flex-col gap-2 ${className}`}>
       {label && (
-        <p className="kol-helper-10 uppercase tracking-widest text-meta">{label}</p>
+        <p className="kol-helper-10 tracking-widest text-meta">{label}</p>
       )}
       {children}
     </div>

package/src/atoms/Tag.jsx

@@ -71,7 +71,7 @@ export default function Tag({
           className="tag-dismiss"
           onClick={handleRemove}
         >
-          <Icon name="cross" size={iconSize} />
+          <Icon name="x" size={iconSize} />
         </span>
       )}
     </Element>

package/src/atoms/Textarea.jsx

@@ -6,7 +6,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * `--textarea` modifier (display: block).
  *
  *   variant="filled" (default) — persistent solid bg
- *   variant="ghost"            — borderless at rest, reveals on hover/focus
+ *   variant="ghost"            — legacy alias, resolves to outline
  *   variant="outline"          — bordered, transparent bg
  *
  *   size="sm" / "md" (default) / "lg" — padding + type class

package/src/atoms/ToggleBracket.jsx

@@ -25,8 +25,8 @@ const ToggleBracket = ({
   const isPlain = variant === 'plain'
 
   const cls = isPlain
-    ? `inline-flex items-center gap-3 kol-mono-12 uppercase text-meta hover:text-emphasis transition-colors bg-transparent border-0 p-0 cursor-pointer ${className}`
-    : `kol-control kol-control--filled kol-control-md kol-mono-12 uppercase justify-between gap-3 ${value ? 'toggle-bracket--active' : ''} ${className}`
+    ? `inline-flex items-center gap-3 kol-mono-12 text-meta hover:text-emphasis transition-colors bg-transparent border-0 p-0 cursor-pointer ${className}`
+    : `kol-control kol-control--filled kol-control-md kol-mono-12 justify-between gap-3 ${value ? 'toggle-bracket--active' : ''} ${className}`
 
   return (
     <button

package/src/atoms/ToggleCheckbox.jsx

@@ -29,9 +29,9 @@ const ToggleCheckbox = ({
           <polyline points="1 5 4 8 11 1" fill="none" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
       </span>
-      <span className="toggle-checkbox-label kol-helper-12 uppercase tracking-[0.08em]">
+      <span className="toggle-checkbox-label kol-helper-12 tracking-[0.08em]">
         {label}
-        {hint ? <span className="ml-2 opacity-60 normal-case tracking-normal kol-helper-10">{hint}</span> : null}
+        {hint ? <span className="ml-2 opacity-60 tracking-normal kol-helper-10">{hint}</span> : null}
       </span>
     </label>
   )

package/src/atoms/ViewToggle.jsx

@@ -13,7 +13,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
  *                      inactive = off (bare text). Use for compact on/off
  *                      where a segmented two-button toggle is overkill.
  *
- * Built on the .kol-control shell. Default options use grid-06 / list-01
+ * Built on the .kol-control shell. Default options use grid / view-list
  * icons; consumers can pass `options` to override. `iconVariant` picks the
  * icon cut for variant="icon" ('stroke' default; 'solid' reads better at
  * 14px). For `variant="single"`, the FIRST option in `options` is the "off"
@@ -25,8 +25,8 @@ const ViewToggle = ({
   variant = 'text',
   iconVariant = 'stroke',
   options = [
-    { value: 'grid', label: 'Grid view', icon: 'grid-06' },
-    { value: 'list', label: 'List view', icon: 'list-01' }
+    { value: 'grid', label: 'Grid view', icon: 'grid' },
+    { value: 'list', label: 'List view', icon: 'view-list' }
   ],
   className = ''
 }) => {

package/src/index.js

@@ -117,6 +117,7 @@ export { Icon } from '@kolkrabbi/kol-icons'
 
 // graphics (SVG illustration loader — globs its own ./graphics/svg/**)
 export { default as Graphic, GRAPHICS } from './graphics/Graphic.jsx'
+export { GRAPHIC_RAW } from './graphics/graphicData.js'
 
 // hooks
 export { default as usePrefersReducedMotion } from './hooks/usePrefersReducedMotion.js'

package/src/molecules/CodeBlock.jsx

@@ -1,11 +1,27 @@
 import CopyButton from '../atoms/CopyButton.jsx'
 
-export default function CodeBlock({ children, language }) {
+/**
+ * CodeBlock — a chrome'd code block with language chip, filename chip, and copy.
+ *
+ * Accepts three input shapes (first match wins per field):
+ *   • Portable Text: `value={{ code, language, filename }}` — the Sanity code-block
+ *     object can be passed straight through from a portable-text map.
+ *   • Direct props: `code` / `language` / `filename`.
+ *   • Children: `<CodeBlock language="js">{'…'}</CodeBlock>` (the original API).
+ *
+ * DOM order is copy → filename → lang → pre so the `.kol-codeblock-*` + pre
+ * adjacency rules in the chrome CSS can pad the pre when chips are present.
+ */
+export default function CodeBlock({ children, code, language, filename, value }) {
+  const src = code ?? value?.code ?? children
+  const lang = language ?? value?.language
+  const file = filename ?? value?.filename
   return (
     <div className="kol-codeblock">
-      {language && <span className="kol-codeblock-lang">{language}</span>}
-      <CopyButton text={String(children)} className="kol-codeblock-copy" />
-      <pre><code>{children}</code></pre>
+      <CopyButton text={String(src ?? '')} className="kol-codeblock-copy" />
+      {file && <span className="kol-codeblock-filename">{file}</span>}
+      {lang && <span className="kol-codeblock-lang">{lang}</span>}
+      <pre><code>{src}</code></pre>
     </div>
   )
 }

package/src/molecules/ColorInputRow.jsx

@@ -136,7 +136,6 @@ export default function ColorInputRow({
       prefix="#"
       chars={6}
       maxLength={6}
-      uppercase
       value={digits}
       onChange={(e) => onChange?.('#' + e.target.value.replace(/^#/, '').toUpperCase())}
       disabled={disabled}

package/src/molecules/TabsRow.jsx

@@ -43,7 +43,7 @@ export default function TabsRow({ tabs = [], value, onChange, onClose, onMinimis
           className="text-meta hover:text-emphasis self-center"
           style={{ lineHeight: 0 }}
         >
-          <Icon name="close" size={12} />
+          <Icon name="x" size={12} />
         </button>
       )}