@columenlabs/lumen-ui 0.1.173 → 0.1.174

package/dist/color-dot.d.ts

@@ -14,10 +14,13 @@ export declare function tintedIcon(icon: ComponentType<{
     className?: string;
 }>;
 /** A value as a chip in its colour (a label): a tint behind, the colour as text, its icon first. */
-export declare function ColorChip({ color, icon: Icon, children, }: {
+export declare function ColorChip({ color, icon: Icon, children, className, title, }: {
     color?: string;
     icon?: ComponentType<{
         className?: string;
     }>;
     children: ReactNode;
+    className?: string;
+    /** The full text on hover, for a chip that may end in an ellipsis. */
+    title?: string;
 }): import("react").JSX.Element;

package/dist/color-dot.js

@@ -32,12 +32,12 @@ export function tintedIcon(icon, color) {
     return out;
 }
 /** A value as a chip in its colour (a label): a tint behind, the colour as text, its icon first. */
-export function ColorChip({ color, icon: Icon, children, }) {
-    return (_jsxs("span", { className: "inline-flex h-5 shrink-0 items-center gap-1 rounded-sm bg-secondary px-1.5 text-xs font-medium whitespace-nowrap text-secondary-foreground", style: color
+export function ColorChip({ color, icon: Icon, children, className, title, }) {
+    return (_jsxs("span", { title: title, className: cn('inline-flex h-5 shrink-0 items-center gap-1 rounded-sm bg-secondary px-1.5 text-xs font-medium whitespace-nowrap text-secondary-foreground', className), style: color
             ? {
                 background: `color-mix(in oklab, ${color} 18%, transparent)`,
                 // The colour pulled toward the text colour, so a light hue (yellow, sky) still reads.
                 color: `color-mix(in oklab, ${color} 55%, var(--foreground))`,
             }
-            : undefined, children: [Icon && _jsx(Icon, { className: "size-3 shrink-0" }), children] }));
+            : undefined, children: [Icon && _jsx(Icon, { className: "size-3 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: children })] }));
 }

package/dist/tag-chips.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Tags (a row's several free-form labels: `ai`, `cybersecurity`, `favorite`) as coloured chips,
 // each with an icon where its words suggest one. The colour comes from the tag's name, so one tag
 // reads the same colour on every row, page and app with nothing stored.
-import { Baby, BookOpen, Bot, Briefcase, Bug, Building2, Car, Check, Clock, Cloud, Code, Cpu, Database, DollarSign, Dumbbell, Factory, Film, Flag, Flame, Gamepad2, Globe, GraduationCap, Heart, HeartPulse, Hourglass, House, Landmark, Leaf, Lock, MapPin, Megaphone, Music, Network, Palette, Plane, Rocket, Server, Shield, ShoppingCart, Smartphone, Sparkles, Star, TriangleAlert, Truck, Users, Utensils, Wrench, Zap, } from 'lucide-react';
+import { Baby, BookOpen, Bot, Briefcase, Bug, Building2, Car, Check, Clock, Cloud, Code, Cpu, Database, DollarSign, Dumbbell, Factory, FileText, Film, Flag, Flame, Gamepad2, Globe, GraduationCap, Handshake, Heart, HeartPulse, Hourglass, House, Landmark, LayoutTemplate, Leaf, Lightbulb, Link, Lock, MapPin, Megaphone, Music, Network, Palette, Plane, Rocket, Server, Shield, ShoppingCart, Smartphone, Sparkles, Star, TriangleAlert, Truck, Users, Utensils, Wrench, Zap, } from 'lucide-react';
 import { ColorChip } from './color-dot.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
 // Chart colours that read as a hue in light and dark (not the grey `--chart-8`).
@@ -46,7 +46,12 @@ const TAG_ICONS = [
     [/^(team|people|social|community|hr)$/, Users],
     [/^(jobs?|work|career|hiring)$/, Briefcase],
     [/^(edu|education|learning|school|course|courses|training)$/, GraduationCap],
-    [/^(books?|reading|docs|research)$/, BookOpen],
+    [/^(docs?|documents?|guides?|pdf|files?)$/, FileText],
+    [/^(templates?|layouts?)$/, LayoutTemplate],
+    [/^(how|howto|tips?|ideas?)$/, Lightbulb],
+    [/^(partners?|partnership|vendors?)$/, Handshake],
+    [/^(links?|urls?|bookmarks?)$/, Link],
+    [/^(books?|reading|research)$/, BookOpen],
     [/^(games?|gaming)$/, Gamepad2],
     [/^(music|audio)$/, Music],
     [/^(film|video|movies?|media|streaming)$/, Film],
@@ -89,7 +94,7 @@ export function TagChips({ tags, max = 3, colorOf, iconOf, empty, }) {
         return _jsx("span", { className: "text-muted-foreground", children: empty ?? '—' });
     const shown = tags.slice(0, max);
     const rest = tags.length - shown.length;
-    const chips = (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1 overflow-hidden", children: [shown.map((t) => (_jsx(ColorChip, { color: colorOf?.(t) ?? tagColor(t), icon: iconOf?.(t) ?? tagIcon(t), children: t }, t))), rest > 0 && _jsxs(ColorChip, { children: ["+", rest] })] }));
+    const chips = (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1 overflow-hidden", children: [shown.map((t) => (_jsx(ColorChip, { color: colorOf?.(t) ?? tagColor(t), icon: iconOf?.(t) ?? tagIcon(t), title: t, className: "max-w-full min-w-9 shrink", children: t }, t))), rest > 0 && _jsxs(ColorChip, { children: ["+", rest] })] }));
     if (!rest)
         return chips;
     return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: chips }), _jsx(TooltipContent, { className: "max-w-md whitespace-normal", children: tags.join(', ') })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.173",
+  "version": "0.1.174",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.173",
+    "@columenlabs/lumen-ui-types": "0.1.174",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",