@twentyfirstmedia/ui-core 0.5.0 → 0.7.0

package/src/components/charts.tsx

@@ -8,6 +8,7 @@ import { cx } from "../cx.js";
 import { Icon } from "../Icon.js";
 import { CountUp } from "./data-display.js";
 import type {
+  BaseProps,
   AreaChartProps,
   BarChartProps,
   DonutProps,
@@ -37,7 +38,7 @@ export function BarChart(p: BarChartProps) {
     bw = Math.max(1, Math.min(p.barWidth || 28, gw * 0.62)),
     ticks = [0, 0.5, 1];
   return (
-    <div ref={mw[0]} className="tf-chart-wrap">
+    <div style={p.style} ref={mw[0]} className={cx("tf-chart-wrap", p.className)}>
       <svg
         className="tf-chart"
         width={W}
@@ -117,7 +118,7 @@ export function LineChart(p: LineChartProps) {
     return vals.map((v, i) => (i ? "L" : "M") + X(i).toFixed(1) + " " + Y(v).toFixed(1)).join(" ");
   }
   return (
-    <div ref={mw[0]} className="tf-chart-wrap">
+    <div style={p.style} ref={mw[0]} className={cx("tf-chart-wrap", p.className)}>
       <svg
         className="tf-chart"
         width={W}
@@ -202,7 +203,8 @@ export function Sparkline(p: SparklineProps) {
     .join(" ");
   return (
     <svg
-      className="tf-chart"
+      style={p.style}
+      className={cx("tf-chart", p.className)}
       viewBox={"0 0 " + W + " " + Hh}
       width={W}
       height={Hh}
@@ -233,9 +235,10 @@ export function Donut(p: DonutProps) {
   const gap = data.length > 1 ? 6 : 0;
   return (
     <div
-      className="tf-donut"
+      className={cx("tf-donut", p.className)}
       style={{
         gap: 24,
+        ...p.style,
       }}
     >
       <div
@@ -323,7 +326,7 @@ export function Donut(p: DonutProps) {
 }
 
 /* ── More charts ── */
-export interface ChartTipProps {
+export interface ChartTipProps extends BaseProps {
   x: number;
   y: number;
   title: React.ReactNode;
@@ -336,10 +339,11 @@ export interface ChartTipProps {
 export function ChartTip(p: ChartTipProps) {
   return (
     <div
-      className="tf-chart-tip"
+      className={cx("tf-chart-tip", p.className)}
       style={{
         left: p.x,
         top: p.y,
+        ...p.style,
       }}
     >
       <b>{p.title}</b>
@@ -355,7 +359,7 @@ export function ChartTip(p: ChartTipProps) {
 }
 export function Legend(p: LegendProps) {
   return (
-    <div className="tf-legend">
+    <div style={p.style} className={cx("tf-legend", p.className)}>
       {(p.items || []).map((s) => (
         <span key={s.name || s.label}>
           <i className={"tf-sw tf-sw-" + (s.tint || "ink")} />
@@ -381,7 +385,7 @@ export function StackedBarChart(p: StackedBarChartProps) {
     gw = Math.max(1, (W - pad) / n),
     bw = Math.max(1, Math.min(p.barWidth || 28, gw * 0.62));
   return (
-    <div ref={mw[0]} className="tf-chart-wrap tf-chart-hover">
+    <div style={p.style} ref={mw[0]} className={cx("tf-chart-wrap tf-chart-hover", p.className)}>
       <svg
         className="tf-chart"
         width={W}
@@ -573,7 +577,7 @@ export function AreaChart(p: AreaChartProps) {
     return Hh - (v / max) * (Hh - 12);
   }
   return (
-    <div ref={mw[0]} className="tf-chart-wrap tf-chart-hover">
+    <div style={p.style} ref={mw[0]} className={cx("tf-chart-wrap tf-chart-hover", p.className)}>
       <svg
         className="tf-chart"
         width={W}
@@ -691,7 +695,7 @@ export function Heatmap(p: HeatmapProps) {
     return v <= 0 ? 0 : Math.min(4, Math.ceil((v / max) * 4));
   }
   return (
-    <div className="tf-heat-wrap">
+    <div style={p.style} className={cx("tf-heat-wrap", p.className)}>
       <div
         className="tf-heat"
         style={{
@@ -763,7 +767,7 @@ export function Funnel(p: FunnelProps) {
     f = p.format || ((v) => formatNumber(v)),
     on = useMounted(120);
   return (
-    <div className="tf-funnel">
+    <div style={p.style} className={cx("tf-funnel", p.className)}>
       {steps.map((s, i) => {
         const pct = (s.value / top) * 100,
           conv = i ? (s.value / (steps[i - 1].value || 1)) * 100 : null;
@@ -819,9 +823,10 @@ export function Gauge(p: GaugeProps) {
       : "ink");
   return (
     <div
-      className="tf-gauge"
+      className={cx("tf-gauge", p.className)}
       style={{
         width: size,
+        ...p.style,
       }}
     >
       <svg

package/src/components/chat.tsx

@@ -8,6 +8,7 @@ import { useControlled } from "../hooks.js";
 import { Avatar, Badge, TintIcon } from "./foundation.js";
 import { Popover, Tooltip } from "./overlays.js";
 import type {
+  BaseProps,
   AgentMarkProps,
   AgentStatusProps,
   ChatMessageProps,
@@ -123,7 +124,7 @@ export function RichText(p: RichTextProps) {
     });
   });
   return (
-    <div className={cx("tf-rt", p.className)}>
+    <div style={p.style} className={cx("tf-rt", p.className)}>
       {blocks}
       {p.streaming && <span className="tf-caret" aria-hidden />}
     </div>
@@ -167,7 +168,7 @@ export function CodeBlock(p: CodeBlockProps) {
     }, 1400);
   }
   return (
-    <div className="tf-code">
+    <div style={p.style} className={cx("tf-code", p.className)}>
       <div className="tf-code-head">
         <span>{p.lang || "text"}</span>
         <button type="button" className="tf-code-copy" onClick={copy} aria-label={t.copyCode}>
@@ -192,10 +193,15 @@ export function CodeBlock(p: CodeBlockProps) {
 }
 
 /* ── Chat building blocks ── */
-export function TypingDots(p: { label?: string }) {
+export function TypingDots(p: BaseProps & { label?: string }) {
   const t = useStrings(CHAT_STRINGS);
   return (
-    <span className="tf-typing" role="status" aria-label={p.label || t.working}>
+    <span
+      style={p.style}
+      className={cx("tf-typing", p.className)}
+      role="status"
+      aria-label={p.label || t.working}
+    >
       <i />
       <i />
       <i />
@@ -211,6 +217,7 @@ export function AgentMark(p: AgentMarkProps) {
       style={{
         width: s,
         height: s,
+        ...p.style,
       }}
       aria-hidden
     >
@@ -242,7 +249,7 @@ export function ChatMessage(p: ChatMessageProps) {
     }, 1400);
   }
   return (
-    <div className={cx("tf-msg", me ? "me" : "ai", p.className)}>
+    <div style={p.style} className={cx("tf-msg", me ? "me" : "ai", p.className)}>
       {me ? (
         <Avatar name={p.name || t.you} size={32} />
       ) : (
@@ -282,25 +289,35 @@ export function ChatMessage(p: ChatMessageProps) {
         )}
         {p.sources && p.sources.length > 0 && (
           <div className="tf-msg-sources">
-            {p.sources.map((s, i) => (
-              <a
-                key={i}
-                className="tf-source"
-                href={s.url || "#"}
-                onClick={
-                  s.onClick
-                    ? (e) => {
-                        e.preventDefault();
-                        s.onClick?.();
-                      }
-                    : undefined
-                }
-              >
-                <span className="tf-source-n">{i + 1}</span>
-                <Icon name={s.icon || "book"} size={12} />
-                {s.title}
-              </a>
-            ))}
+            {p.sources.map((s, i) => {
+              const chip = (
+                <a
+                  key={i}
+                  className="tf-source"
+                  href={s.url || "#"}
+                  title={s.detail ? undefined : s.title}
+                  onClick={
+                    s.onClick
+                      ? (e) => {
+                          e.preventDefault();
+                          s.onClick?.();
+                        }
+                      : undefined
+                  }
+                >
+                  <span className="tf-source-n">{i + 1}</span>
+                  <Icon name={s.icon || "book"} size={12} />
+                  <span className="tf-source-title">{s.title}</span>
+                </a>
+              );
+              return s.detail ? (
+                <Tooltip key={i} label={s.detail}>
+                  {chip}
+                </Tooltip>
+              ) : (
+                chip
+              );
+            })}
           </div>
         )}
         {!me && !p.streaming && p.actions !== false && (
@@ -371,7 +388,7 @@ export function ToolCall(p: ToolCallProps) {
   const open = React.useState(!!p.defaultOpen),
     st = p.status || "done";
   return (
-    <div className={cx("tf-tool", "is-" + st, open[0] && "open")}>
+    <div style={p.style} className={cx("tf-tool", "is-" + st, open[0] && "open", p.className)}>
       <button
         type="button"
         className="tf-tool-head"
@@ -419,7 +436,10 @@ export function Reasoning(p: ReasoningProps) {
   const t = useStrings(CHAT_STRINGS);
   const open = React.useState(!!p.defaultOpen);
   return (
-    <div className={cx("tf-reason", open[0] && "open", p.streaming && "live")}>
+    <div
+      style={p.style}
+      className={cx("tf-reason", open[0] && "open", p.streaming && "live", p.className)}
+    >
       <button
         type="button"
         className="tf-reason-head"
@@ -451,7 +471,7 @@ export function Reasoning(p: ReasoningProps) {
 
 export function PromptStarters(p: PromptStartersProps) {
   return (
-    <div className="tf-starters">
+    <div style={p.style} className={cx("tf-starters", p.className)}>
       {(p.items || []).map((s, i) => (
         <button
           key={i}
@@ -481,6 +501,8 @@ export function ModelPicker(p: ModelPickerProps) {
     cur = models.find((m) => m.id === p.value) || models[0] || {};
   return (
     <Popover
+      style={p.style}
+      className={p.className}
       side={p.side || "top"}
       width={300}
       flush
@@ -555,7 +577,8 @@ export function Composer(p: ComposerProps) {
   }
   return (
     <div
-      className={cx("tf-composer", p.busy && "busy")}
+      style={p.style}
+      className={cx("tf-composer", p.busy && "busy", p.className)}
       onDragOver={(e) => {
         if (p.onAttach) e.preventDefault();
       }}
@@ -723,7 +746,7 @@ export function AgentStatus(p: AgentStatusProps) {
   const t = useStrings(CHAT_STRINGS);
   const s = p.status || "Idle";
   return (
-    <span className="tf-agentstatus">
+    <span style={p.style} className={cx("tf-agentstatus", p.className)}>
       <Badge tone={AGENT_TONE[s] || "neutral"} live={s === "Running" || s === "Thinking"}>
         {t.agentStatus[s] ?? s}
       </Badge>
@@ -754,7 +777,7 @@ export function RunTrace(p: RunTraceProps) {
       : `${formatNumber(ms)} ms`;
   }
   return (
-    <div className="tf-trace">
+    <div style={p.style} className={cx("tf-trace", p.className)}>
       <div className="tf-trace-head">
         <span>{t.step}</span>
         <span>{t.timeline(fms(total))}</span>
@@ -807,7 +830,7 @@ export function UsageMeter(p: UsageMeterProps) {
   const pct = Math.min(100, ((p.used || 0) / (p.limit || 1)) * 100),
     tone = pct >= 90 ? "blush" : pct >= 70 ? "butter" : "mint";
   return (
-    <div className="tf-usage">
+    <div style={p.style} className={cx("tf-usage", p.className)}>
       <div className="tf-usage-top">
         <span>{p.label || t.context}</span>
         <b>{(p.format || String)(p.used) + " / " + (p.format || String)(p.limit)}</b>

package/src/components/commerce.tsx

@@ -39,14 +39,15 @@ export function ProductArt(p: ProductArtProps) {
   return (
     <span
       className={cx("tf-art", "tf-bg-" + (p.tint || "sky"), p.className)}
-      style={
-        size
+      style={{
+        ...(size
           ? {
               width: size,
               height: size,
             }
-          : undefined
-      }
+          : undefined),
+        ...p.style,
+      }}
       role={p.label ? "img" : undefined}
       aria-label={p.label}
       aria-hidden={p.label ? undefined : true}
@@ -82,7 +83,7 @@ export function Price(p: PriceProps) {
   const { formatPercent } = useFormat();
   const sale = p.compareAt && p.compareAt > p.value;
   return (
-    <span className={cx("tf-price", p.size && "tf-price-" + p.size)}>
+    <span style={p.style} className={cx("tf-price", p.size && "tf-price-" + p.size, p.className)}>
       <b>{money(p.value, p.currency)}</b>
       {sale && <s>{money(p.compareAt ?? 0, p.currency)}</s>}
       {sale && p.showSave !== false && (
@@ -100,7 +101,12 @@ export function Rating(p: RatingProps) {
   const v = p.value || 0,
     shown = formatNumber(v, { minimumFractionDigits: 1, maximumFractionDigits: 1 });
   return (
-    <span className="tf-rating" role="img" aria-label={t.ratingLabel(shown, p.count)}>
+    <span
+      style={p.style}
+      className={cx("tf-rating", p.className)}
+      role="img"
+      aria-label={t.ratingLabel(shown, p.count)}
+    >
       <span className="tf-stars" aria-hidden>
         {[0, 1, 2, 3, 4].map((i) => {
           const f = Math.max(0, Math.min(1, v - i));
@@ -141,7 +147,7 @@ export function StockBadge(p: StockBadgeProps) {
 export function ProductCard(p: ProductCardProps) {
   const t = useStrings(COMMERCE_STRINGS);
   return (
-    <div className={cx("tf-product", p.className)} onClick={p.onClick}>
+    <div style={p.style} className={cx("tf-product", p.className)} onClick={p.onClick}>
       <div className="tf-product-media">
         <ProductArt kind={p.art} tint={p.tint} />
         {p.badge && (
@@ -202,7 +208,7 @@ export function VariantPicker(p: VariantPickerProps) {
     color = p.type === "color";
   const cur = opts.find((o) => o.value === v[0]);
   return (
-    <fieldset className="tf-variants">
+    <fieldset style={p.style} className={cx("tf-variants", p.className)}>
       <legend className="tf-field-label">
         {p.label}
         {cur && <span className="tf-variants-cur">{cur.label || cur.value}</span>}
@@ -247,7 +253,7 @@ export function VariantPicker(p: VariantPickerProps) {
 export function CartLine(p: CartLineProps) {
   const t = useStrings(COMMERCE_STRINGS);
   return (
-    <div className="tf-cartline">
+    <div style={p.style} className={cx("tf-cartline", p.className)}>
       <ProductArt kind={p.art} tint={p.tint} size={64} />
       <div className="tf-cartline-text">
         <b>{p.name}</b>
@@ -302,7 +308,7 @@ export function OrderSummary(p: OrderSummaryProps) {
     err = React.useState<string | null>(null),
     toFree = (p.freeShippingFrom || 75) - (sub - disc);
   return (
-    <div className="tf-summary">
+    <div style={p.style} className={cx("tf-summary", p.className)}>
       {p.title !== false && <b className="tf-summary-title">{p.title || t.orderSummary}</b>}
       {p.showLines && (
         <div
@@ -425,7 +431,11 @@ export function CheckoutSteps(p: CheckoutStepsProps) {
   const steps = p.steps || t.checkoutSteps,
     cur = p.current || 0;
   return (
-    <ol className="tf-csteps" aria-label={t.checkoutProgress}>
+    <ol
+      style={p.style}
+      className={cx("tf-csteps", p.compact && "compact", p.className)}
+      aria-label={t.checkoutProgress}
+    >
       {steps.map((s, i) => (
         <li
           key={s}
@@ -440,7 +450,7 @@ export function CheckoutSteps(p: CheckoutStepsProps) {
             }}
           >
             <span className="tf-cstep-n">{i < cur ? <Icon name="check" size={12} /> : i + 1}</span>
-            {s}
+            <span className="tf-cstep-label">{s}</span>
           </button>
         </li>
       ))}
@@ -458,7 +468,7 @@ export function OrderTimeline(p: OrderTimelineProps) {
     times = p.times || {},
     cancelled = p.status === "Cancelled" || p.status === "Refunded";
   return (
-    <div className={cx("tf-otl", cancelled && "cancelled")}>
+    <div style={p.style} className={cx("tf-otl", cancelled && "cancelled", p.className)}>
       {ORDER_STEPS.map((s, i) => {
         const done = !cancelled && i <= cur;
         return (
@@ -490,34 +500,58 @@ export function OrderTimeline(p: OrderTimelineProps) {
 export function PlanCard(p: PlanCardProps) {
   const t = useStrings(COMMERCE_STRINGS);
   const money = useMoney();
+  const Link = (p.linkAs || "a") as React.ElementType;
   return (
-    <div className={cx("tf-plan", p.featured && "featured", p.current && "current")}>
+    <div
+      style={p.style}
+      className={cx("tf-plan", p.featured && "featured", p.current && "current", p.className)}
+    >
       {p.featured && <span className="tf-plan-flag">{p.flag || t.mostPopular}</span>}
       <div className="tf-plan-head">
         <b>{p.name}</b>
+        {p.current && (
+          <Badge tone="success" className="tf-plan-current">
+            {t.currentPlan}
+          </Badge>
+        )}
         {p.text && <span>{p.text}</span>}
       </div>
       <div className="tf-plan-price">
+        {p.pricePrefix && <span className="tf-plan-prefix">{p.pricePrefix}</span>}
         {p.price === 0 ? (
           <b>{t.free}</b>
-        ) : p.price == null ? (
+        ) : p.price === null || p.price === undefined ? (
           <b>{t.letsTalk}</b>
-        ) : (
+        ) : typeof p.price === "number" ? (
           <>
             <b>{money(p.price)}</b>
             <span>{p.per || t.perSeatMonth}</span>
           </>
+        ) : (
+          <>
+            <b>{p.price}</b>
+            {p.per && <span>{p.per}</span>}
+          </>
         )}
         {p.was && <s>{money(p.was)}</s>}
       </div>
-      <Button
-        variant={p.current ? "soft" : p.featured ? "primary" : "secondary"}
-        disabled={p.current || p.disabled}
-        onClick={p.onPick}
-        className="tf-plan-cta"
-      >
-        {p.current ? t.currentPlan : p.cta || t.choosePlan(p.name)}
-      </Button>
+      {p.priceNote && <p className="tf-plan-note">{p.priceNote}</p>}
+      {p.href && !p.current && !p.disabled ? (
+        <Button variant={p.featured ? "primary" : "secondary"} className="tf-plan-cta" asChild>
+          <Link href={p.href} onClick={p.onPick}>
+            {p.cta || t.choosePlan(p.name)}
+          </Link>
+        </Button>
+      ) : (
+        <Button
+          variant={p.current ? "soft" : p.featured ? "primary" : "secondary"}
+          disabled={p.current || p.disabled}
+          onClick={p.onPick}
+          className="tf-plan-cta"
+        >
+          {p.current ? t.currentPlan : p.cta || t.choosePlan(p.name)}
+        </Button>
+      )}
       <ul className="tf-plan-feats">
         {(p.features || []).map((f, i) => (
           <li key={i} className={f[0] === "-" ? "no" : undefined}>