@twentyfirstmedia/ui-core 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twentyfirstmedia/ui-core",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Components, hooks, icons and formatters shared by the Halo and Pro kits.",
   "license": "MIT",
   "author": "Twentyfirst Media (https://twentyfirst.media)",
@@ -63,6 +63,7 @@
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "jsdom": "31.0.0",
+    "jsqr": "1.4.0",
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "typescript": "6.0.3",

package/src/components/admin.tsx

@@ -8,6 +8,7 @@ import { Icon } from "../Icon.js";
 import { toast } from "../toast-store.js";
 import { Portal } from "../portal.js";
 import { DatePicker, FormField, OtpInput, Segmented } from "./forms.js";
+import { QrCode } from "./qr-code.js";
 import { Popover } from "./overlays.js";
 import { StatusIndicator, StatusShape } from "./status.js";
 import { Avatar, Button, Chip, IconButton, TintIcon } from "./foundation.js";
@@ -68,7 +69,7 @@ export function RangeSlider(p: RangeSliderProps) {
     v[1](n);
   }
   return (
-    <FormField id={id} label={p.label} hint={p.hint}>
+    <FormField style={p.style} className={p.className} id={id} label={p.label} hint={p.hint}>
       <div className="tf-range">
         <div className="tf-range-track">
           <span
@@ -148,7 +149,7 @@ export function BarList(p: BarListProps) {
     max = Math.max.apply(null, items.map((i) => i.value).concat([1])),
     f = p.format || formatNumber;
   return (
-    <div className="tf-barlist" role="list" aria-label={p.label}>
+    <div style={p.style} className={cx("tf-barlist", p.className)} role="list" aria-label={p.label}>
       {items.map((it, i) => (
         <div
           key={it.id || (typeof it.label === "string" ? it.label : i)}
@@ -202,6 +203,8 @@ export function StatusSelect(p: StatusSelectProps) {
     cur = opts.find((o) => o.value === v[0]) || opts[0] || {};
   return (
     <Popover
+      style={p.style}
+      className={p.className}
       width={p.width || 220}
       trigger={(s) => (
         <button
@@ -269,11 +272,14 @@ export function TilePicker(p: TilePickerProps) {
   }
   return (
     <div
-      className="tf-tiles"
+      className={cx("tf-tiles", p.layout === "list" && "list", p.className)}
       role={multi ? "group" : "radiogroup"}
       aria-label={p.label}
       style={{
-        gridTemplateColumns: "repeat(auto-fill, minmax(" + (p.min || 120) + "px, 1fr))",
+        ...(p.layout === "list"
+          ? null
+          : { gridTemplateColumns: "repeat(auto-fill, minmax(" + (p.min || 120) + "px, 1fr))" }),
+        ...p.style,
       }}
     >
       {(p.options || []).map((o) => (
@@ -336,7 +342,7 @@ export function LiveFeed(p: LiveFeedProps) {
     waiting = paused[0] ? Math.max(0, (p.items || []).length - heldItems.length) : 0;
   const types = p.types || [];
   return (
-    <div className="tf-livefeed">
+    <div style={p.style} className={cx("tf-livefeed", p.className)}>
       <div className="tf-livefeed-head">
         <span className={cx("tf-live", paused[0] && "off")}>
           <span className="tf-live-dot" aria-hidden />
@@ -493,6 +499,7 @@ export function MapView(p: MapViewProps) {
       className={cx("tf-map", p.className)}
       style={{
         height: Hh,
+        ...p.style,
       }}
       role="region"
       aria-label={p.label || t.viewMap}
@@ -583,7 +590,7 @@ export function BalanceCard(p: BalanceCardProps) {
     low = p.low != null && p.balance <= p.low,
     st = p.status || (p.balance <= 0 ? "danger" : low ? "warn" : "ok");
   return (
-    <div className={cx("tf-balance", "is-" + st)}>
+    <div style={p.style} className={cx("tf-balance", "is-" + st, p.className)}>
       <div className="tf-balance-head">
         {p.logo || <TintIcon icon={p.icon || "wallet"} tint={p.tint || "butter"} size={36} />}
         <div className="tf-option-text">
@@ -653,7 +660,7 @@ export function BalanceCard(p: BalanceCardProps) {
 export function ServiceMonitor(p: ServiceMonitorProps) {
   const { formatNumber } = useFormat();
   return (
-    <div className="tf-svcmon" role="list" aria-label={p.label}>
+    <div style={p.style} className={cx("tf-svcmon", p.className)} role="list" aria-label={p.label}>
       {(p.items || []).map((s) => (
         <div key={s.id || s.name} role="listitem" className="tf-svcmon-row">
           <StatusShape status={s.status} />
@@ -690,7 +697,7 @@ export function RunHistory(p: RunHistoryProps) {
   const { formatNumber } = useFormat();
   const open = React.useState<string | number | null>(null);
   return (
-    <div className="tf-runs" role="list" aria-label={p.label}>
+    <div style={p.style} className={cx("tf-runs", p.className)} role="list" aria-label={p.label}>
       {(p.items || []).map((r) => {
         const on = open[0] === r.id;
         return (
@@ -734,7 +741,7 @@ export function WebhookEndpoint(p: WebhookEndpointProps) {
   const { formatNumber } = useFormat();
   const open = React.useState(!!p.defaultOpen);
   return (
-    <div className="tf-hook">
+    <div style={p.style} className={cx("tf-hook", p.className)}>
       <div className="tf-hook-head">
         <TintIcon icon="webhook" tint="lilac" size={36} />
         <div
@@ -812,7 +819,7 @@ export function WebhookEndpoint(p: WebhookEndpointProps) {
 export function BackupList(p: BackupListProps) {
   const t = useStrings(ADMIN_STRINGS);
   return (
-    <div className="tf-backups" role="list" aria-label={p.label}>
+    <div style={p.style} className={cx("tf-backups", p.className)} role="list" aria-label={p.label}>
       {(p.items || []).map((b) => (
         <div key={b.id} role="listitem" className="tf-backups-row">
           <StatusShape status={b.status || "ok"} />
@@ -865,9 +872,10 @@ export function BlockList(p: BlockListProps) {
   );
   return (
     <div
-      className="tf-col"
+      className={cx("tf-col", p.className)}
       style={{
         gap: 12,
+        ...p.style,
       }}
     >
       <div className="tf-filterbar">
@@ -942,7 +950,10 @@ export function ReviewCard(p: ReviewCardProps) {
     } as Record<string, [Status, string]>
   )[p.state || "pending"] as [Status, string];
   return (
-    <article className={cx("tf-review", "is-" + (p.state || "pending"))}>
+    <article
+      style={p.style}
+      className={cx("tf-review", "is-" + (p.state || "pending"), p.className)}
+    >
       <div className="tf-review-head">
         <Avatar name={p.author} size={36} />
         <div
@@ -1064,7 +1075,7 @@ export function CouponCard(p: CouponCardProps) {
   const used = p.used || 0,
     st = p.status || (p.limit && used >= p.limit ? "idle" : "ok");
   return (
-    <div className={cx("tf-coupon", st !== "ok" && "off")}>
+    <div style={p.style} className={cx("tf-coupon", st !== "ok" && "off", p.className)}>
       <div className="tf-coupon-val">
         <b>
           {p.kind === "fixed"
@@ -1155,7 +1166,14 @@ export function LocaleField(p: LocaleFieldProps) {
   }
   const done = locs.filter((l) => (v[0][l.code] || "").trim()).length;
   return (
-    <FormField id={id} label={p.label} hint={p.hint} error={p.error}>
+    <FormField
+      style={p.style}
+      className={p.className}
+      id={id}
+      label={p.label}
+      hint={p.hint}
+      error={p.error}
+    >
       <div className="tf-locfield">
         <div className="tf-locfield-tabs" role="tablist" aria-label={t.languages}>
           {locs.map((l) => {
@@ -1251,6 +1269,8 @@ export function LocaleSwitcher(p: LocaleSwitcherProps) {
     (p.languages || []).find((l) => l.code === lang[0]) || {};
   return (
     <Popover
+      style={p.style}
+      className={p.className}
       width={280}
       trigger={(s) => (
         <button
@@ -1345,18 +1365,22 @@ export function LocaleSwitcher(p: LocaleSwitcherProps) {
 }
 
 export function WorkspaceSwitcher(p: WorkspaceSwitcherProps) {
+  const t = useStrings(ADMIN_STRINGS);
   const items = p.items || [],
     v = useControlled(p.value, items[0] && items[0].id, p.onChange),
     cur: Partial<WorkspaceSwitcherProps["items"][number]> = items.find((x) => x.id === v[0]) || {};
   return (
     <Popover
+      style={p.style}
+      className={p.className}
       width={p.width || 300}
       trigger={(s) => (
         <button
           type="button"
-          className={cx("tf-wssw", p.variant === "frame" && "on-frame")}
+          className={cx("tf-wssw", p.variant === "frame" && "on-frame", p.compact && "compact")}
           aria-haspopup="listbox"
           aria-expanded={s.open}
+          aria-label={p.compact ? `${t.switchWorkspace}: ${cur.name || ""}` : undefined}
           onClick={s.toggle}
         >
           {cur.logo || (
@@ -1364,11 +1388,15 @@ export function WorkspaceSwitcher(p: WorkspaceSwitcherProps) {
               {(cur.name || "?").charAt(0)}
             </span>
           )}
-          <span className="tf-option-text">
-            <b>{cur.name}</b>
-            {cur.sub && <small>{cur.sub}</small>}
-          </span>
-          <Icon name="chevronDown" size={14} />
+          {!p.compact && (
+            <>
+              <span className="tf-option-text">
+                <b>{cur.name}</b>
+                {cur.sub && <small>{cur.sub}</small>}
+              </span>
+              <Icon name="chevronDown" size={14} />
+            </>
+          )}
         </button>
       )}
     >
@@ -1605,7 +1633,7 @@ export function TwoFactorSetup(p: TwoFactorSetupProps) {
     saved = React.useState(false);
   const steps = t.twoFactorSteps;
   return (
-    <div className="tf-2fa">
+    <div style={p.style} className={cx("tf-2fa", p.className)}>
       <ol className="tf-2fa-steps">
         {steps.map((s, i) => (
           <li key={i} className={cx(i === step[0] && "on", i < step[0] && "done")}>
@@ -1617,7 +1645,12 @@ export function TwoFactorSetup(p: TwoFactorSetupProps) {
       {step[0] === 0 && (
         <div className="tf-2fa-scan">
           <div className="tf-2fa-qr" role="img" aria-label={t.qrCode}>
-            {p.qr || <Icon name="grid" size={48} />}
+            {p.qr ||
+              (p.qrValue ? (
+                <QrCode value={p.qrValue} quiet={2} label={t.qrCode} />
+              ) : (
+                <Icon name="grid" size={48} />
+              ))}
           </div>
           <div
             className="tf-col"
@@ -1679,6 +1712,8 @@ export function TwoFactorSetup(p: TwoFactorSetupProps) {
           <OtpInput
             error={!!err[0]}
             onComplete={(c) => {
+              // a second wrong code turns the error on again, which empties the cells
+              err[1](null);
               Promise.resolve(p.onVerify ? p.onVerify(c) : true).then((ok) => {
                 if (ok) {
                   err[1](null);
@@ -1688,6 +1723,14 @@ export function TwoFactorSetup(p: TwoFactorSetupProps) {
             }}
           />
           {err[0] && <span className="tf-field-error">{err[0]}</span>}
+          {p.trustDevice && (
+            <Checkbox
+              defaultChecked={false}
+              onChange={(e) => p.onTrustChange?.(e.currentTarget.checked)}
+            >
+              {typeof p.trustDevice === "string" ? p.trustDevice : t.trustDevice}
+            </Checkbox>
+          )}
           <div>
             <Button
               variant="ghost"
@@ -1781,7 +1824,7 @@ export function ColorField(p: ColorFieldProps) {
     b = lum(p.against || "#ffffff"),
     ratio = a != null && b != null ? (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05) : null;
   return (
-    <FormField id={id} label={p.label} hint={p.hint}>
+    <FormField style={p.style} className={p.className} id={id} label={p.label} hint={p.hint}>
       <div className="tf-colorf">
         <label
           className="tf-colorf-sw"

package/src/components/agents.tsx

@@ -42,7 +42,8 @@ export function AgentCard(p: AgentCardProps) {
   const t = useStrings(AGENTS_STRINGS);
   return (
     <div
-      className={cx("tf-agentcard", p.onClick && "click")}
+      style={p.style}
+      className={cx("tf-agentcard", p.onClick && "click", p.className)}
       onClick={p.onClick}
       tabIndex={p.onClick ? 0 : undefined}
     >
@@ -80,7 +81,7 @@ export function AgentCard(p: AgentCardProps) {
 }
 export function AgentDetails(p: AgentDetailsProps) {
   return (
-    <div className="tf-agentdetails">
+    <div style={p.style} className={cx("tf-agentdetails", p.className)}>
       <div className="tf-agentdetails-id">
         <AgentMark tint={p.tint} size={56} live={p.status === "running"} />
         <b>{p.name}</b>
@@ -119,7 +120,7 @@ export function ChatList(p: ChatListProps) {
     )
     .filter((g) => g.items.length);
   return (
-    <div className="tf-chatlist">
+    <div style={p.style} className={cx("tf-chatlist", p.className)}>
       <SearchField
         placeholder={p.searchPlaceholder || t.searchChats}
         value={q[0]}
@@ -186,7 +187,7 @@ export function ChatList(p: ChatListProps) {
 }
 export function ChatWorkspace(p: ChatWorkspaceProps) {
   return (
-    <div className={cx("tf-chatws", p.details && "with-details", p.className)}>
+    <div style={p.style} className={cx("tf-chatws", p.details && "with-details", p.className)}>
       <div className="tf-chatws-list">{p.list}</div>
       <div className="tf-chatws-thread">{p.thread}</div>
       {p.details && <div className="tf-chatws-details">{p.details}</div>}
@@ -196,7 +197,7 @@ export function ChatWorkspace(p: ChatWorkspaceProps) {
 export function SearchHits(p: SearchHitsProps) {
   const t = useStrings(AGENTS_STRINGS);
   return (
-    <div className="tf-hits">
+    <div style={p.style} className={cx("tf-hits", p.className)}>
       {(p.items || []).length === 0 ? (
         <EmptyState icon="search" title={t.nothingFound} text={p.emptyText} />
       ) : (
@@ -231,7 +232,7 @@ export function SearchHits(p: SearchHitsProps) {
 export function ThinkingLine(p: ThinkingLineProps) {
   const t = useStrings(AGENTS_STRINGS);
   return (
-    <div className="tf-thinking" role="status">
+    <div style={p.style} className={cx("tf-thinking", p.className)} role="status">
       <TypingDots />
       <span>{p.text || t.thinking}</span>
     </div>
@@ -252,7 +253,7 @@ export function FeedbackRating(p: FeedbackRatingProps) {
       </span>
     );
   return (
-    <div className="tf-feedback">
+    <div style={p.style} className={cx("tf-feedback", p.className)}>
       <div
         className="tf-row"
         style={{
@@ -316,7 +317,7 @@ export function FeedbackRating(p: FeedbackRatingProps) {
 }
 export function ActivityFeed(p: ActivityFeedProps) {
   return (
-    <div className="tf-activity">
+    <div style={p.style} className={cx("tf-activity", p.className)}>
       {(
         p.groups || [
           {
@@ -349,7 +350,7 @@ export function ActivityFeed(p: ActivityFeedProps) {
 export function DailyBriefing(p: DailyBriefingProps) {
   const t = useStrings(AGENTS_STRINGS);
   return (
-    <div className="tf-briefing">
+    <div style={p.style} className={cx("tf-briefing", p.className)}>
       <div className="tf-briefing-head">
         <AgentMark tint={p.tint || "lilac"} size={40} />
         <div className="tf-option-text">
@@ -411,7 +412,7 @@ export function BudgetStop(p: BudgetStopProps) {
   const t = useStrings(AGENTS_STRINGS);
   const { formatMoney } = useFormat();
   return (
-    <div className="tf-budgetstop">
+    <div style={p.style} className={cx("tf-budgetstop", p.className)}>
       <Alert
         tone="danger"
         title={p.title || t.budgetUsedUp}
@@ -458,7 +459,7 @@ export function MemoryViewer(p: MemoryViewerProps) {
       (!q[0] || m.text.toLowerCase().indexOf(q[0].toLowerCase()) > -1),
   );
   return (
-    <div className="tf-memory">
+    <div style={p.style} className={cx("tf-memory", p.className)}>
       <div className="tf-filterbar">
         <SearchField
           placeholder={t.searchMemory}
@@ -557,7 +558,7 @@ export function OverrideDiff(p: OverrideDiffProps) {
     }
   }
   return (
-    <div className="tf-diff">
+    <div style={p.style} className={cx("tf-diff", p.className)}>
       <div className="tf-diff-head">
         <div className="tf-option-text">
           <b>{p.title}</b>
@@ -602,7 +603,7 @@ const TRIGGER_ICON: Record<string, IconName> = {
 export function TriggerList(p: TriggerListProps) {
   const strings = useStrings(AGENTS_STRINGS);
   return (
-    <div className="tf-triggers">
+    <div style={p.style} className={cx("tf-triggers", p.className)}>
       {(p.items || []).map((t) => (
         <div key={t.id} className={cx("tf-trigger", t.enabled === false && "off")}>
           <TintIcon
@@ -655,13 +656,14 @@ export function ScheduleCalendar(p: ScheduleCalendarProps) {
     rowH = 32;
   return (
     <div
-      className="tf-sched"
-      style={
-        {
+      className={cx("tf-sched", p.className)}
+      style={{
+        ...({
           "--rows": hours.length,
           "--row-h": rowH + "px",
-        } as React.CSSProperties
-      }
+        } as React.CSSProperties),
+        ...p.style,
+      }}
     >
       <span />
       {days.map((d, i) => (
@@ -726,7 +728,7 @@ export function OrgChart(p: OrgChartProps) {
     );
   }
   return (
-    <div className="tf-org">
+    <div style={p.style} className={cx("tf-org", p.className)}>
       <ul>
         {node(
           Object.assign(
@@ -746,7 +748,7 @@ export function VoiceMode(p: VoiceModeProps) {
     bars = [];
   for (let i = 0; i < 24; i++) bars.push(i);
   return (
-    <div className={cx("tf-voice", "is-" + st)}>
+    <div style={p.style} className={cx("tf-voice", "is-" + st, p.className)}>
       <AgentMark tint={p.tint || "lilac"} size={72} live={st !== "idle"} />
       <b className="tf-voice-name">{p.name}</b>
       <span className="tf-voice-state">

package/src/components/app-chrome.tsx

@@ -19,7 +19,11 @@ import type {
 export function MobileTabBar(p: MobileTabBarProps) {
   const t = useStrings(APP_CHROME_STRINGS);
   return (
-    <nav className="tf-tabbar" aria-label={p.label || t.mainNavigation}>
+    <nav
+      style={p.style}
+      className={cx("tf-tabbar", p.className)}
+      aria-label={p.label || t.mainNavigation}
+    >
       {(p.items || []).map((it) => {
         const on = it.id === p.active;
         return (
@@ -36,7 +40,7 @@ export function MobileTabBar(p: MobileTabBarProps) {
               <Icon name={it.icon} size={20} />
               {it.count ? <span className="tf-dotcount">{it.count}</span> : null}
             </span>
-            <span>{it.label}</span>
+            <span className="tf-tabbar-label">{it.label}</span>
           </button>
         );
       })}
@@ -46,7 +50,7 @@ export function MobileTabBar(p: MobileTabBarProps) {
 
 export function PushNotification(p: PushNotificationProps) {
   return (
-    <div className="tf-push">
+    <div style={p.style} className={cx("tf-push", p.className)}>
       <div className="tf-push-top">
         <span className="tf-push-app">{p.app}</span>
         <small>{p.time}</small>
@@ -76,7 +80,7 @@ export function ConfigPRSummary(p: ConfigPRSummaryProps) {
     file: "file",
   };
   return (
-    <div className="tf-prsum">
+    <div style={p.style} className={cx("tf-prsum", p.className)}>
       <div className="tf-prsum-head">
         <TintIcon icon="branch" tint="lilac" />
         <span className="tf-option-text">
@@ -128,7 +132,7 @@ export function ConfigPRSummary(p: ConfigPRSummaryProps) {
 export function ModuleRegistry(p: ModuleRegistryProps) {
   const t = useStrings(APP_CHROME_STRINGS);
   return (
-    <div className="tf-modules">
+    <div style={p.style} className={cx("tf-modules", p.className)}>
       {(p.items || []).map((m) => (
         <div key={m.id} className="tf-module">
           <TintIcon

package/src/components/approvals.tsx

@@ -109,6 +109,7 @@ export function ApprovalCard(p: ApprovalCardProps) {
   }
   return (
     <div
+      style={p.style}
       ref={ref}
       className={cx("tf-approval", p.compact && "compact", p.className)}
       tabIndex={0}
@@ -219,7 +220,8 @@ export function ApprovalInbox(p: ApprovalInboxProps) {
   const items = (p.items || []).slice().sort((a, b) => (b.ageMin || 0) - (a.ageMin || 0));
   return (
     <div
-      className="tf-inbox"
+      style={p.style}
+      className={cx("tf-inbox", p.className)}
       role="listbox"
       aria-label={p.label || t.approvals}
       onKeyDown={(e) => {

package/src/components/building-blocks.tsx

@@ -24,7 +24,7 @@ import type {
 export function Kbd(p: KbdProps) {
   const keys = p.keys || [p.children];
   return (
-    <span className="tf-kbds">
+    <span style={p.style} className={cx("tf-kbds", p.className)}>
       {keys.map((k, i) => (
         <kbd key={i} className="tf-kbd2">
           {k}
@@ -35,7 +35,7 @@ export function Kbd(p: KbdProps) {
 }
 export function KeyValue(p: KeyValueProps) {
   return (
-    <dl className={cx("tf-kv", p.dense && "dense", p.className)}>
+    <dl style={p.style} className={cx("tf-kv", p.dense && "dense", p.className)}>
       {(p.items || []).map((it, i) => {
         const r = Array.isArray(it)
           ? {
@@ -60,7 +60,8 @@ export function Spinner(p: SpinnerProps) {
   const t = useStrings(BUILDING_BLOCKS_STRINGS);
   return (
     <span
-      className={cx("tf-spinner", p.size === "lg" && "lg")}
+      style={p.style}
+      className={cx("tf-spinner", p.size === "lg" && "lg", p.className)}
       role="status"
       aria-label={p.label || t.loading}
     />
@@ -69,7 +70,7 @@ export function Spinner(p: SpinnerProps) {
 export function Collapsible(p: CollapsibleProps) {
   const o = useControlled(p.open, !!p.defaultOpen, p.onOpenChange);
   return (
-    <div className={cx("tf-collapse", o[0] && "open", p.className)}>
+    <div style={p.style} className={cx("tf-collapse", o[0] && "open", p.className)}>
       <button
         type="button"
         className="tf-collapse-head"
@@ -106,8 +107,9 @@ export function ContextMenu(p: ContextMenuProps) {
   }
   return (
     <div
+      style={p.style}
       ref={ref}
-      className="tf-ctx"
+      className={cx("tf-ctx", p.className)}
       onContextMenu={(e) => {
         e.preventDefault();
         openAt(e.clientX, e.clientY);
@@ -191,11 +193,12 @@ export function SplitPane(p: SplitPaneProps) {
     <div
       ref={wrap}
       className={cx("tf-split", p.className)}
-      style={
-        {
+      style={{
+        ...({
           "--split": size[0] + "px",
-        } as React.CSSProperties
-      }
+        } as React.CSSProperties),
+        ...p.style,
+      }}
     >
       <div className="tf-split-a">{p.left}</div>
       <div
@@ -264,7 +267,7 @@ export function TreeView(p: TreeViewProps) {
     );
   }
   return (
-    <ul className="tf-tree" role="tree" aria-label={p.label}>
+    <ul style={p.style} className={cx("tf-tree", p.className)} role="tree" aria-label={p.label}>
       {(p.items || []).map((n) => node(n, 0))}
     </ul>
   );
@@ -279,7 +282,13 @@ export function InlineEdit(p: InlineEditProps) {
   if (!ed[0])
     return (
       <span
-        className={cx("tf-inline", p.mono && "tf-mono", p.align === "right" && "right")}
+        className={cx(
+          "tf-inline",
+          p.mono && "tf-mono",
+          p.align === "right" && "right",
+          p.className,
+        )}
+        style={p.style}
         tabIndex={0}
         role="button"
         aria-label={p.label}
@@ -300,7 +309,8 @@ export function InlineEdit(p: InlineEditProps) {
     );
   return p.options ? (
     <select
-      className="tf-input tf-inline-input"
+      className={cx("tf-input tf-inline-input", p.className)}
+      style={p.style}
       autoFocus
       value={v[0]}
       onChange={(e) => {
@@ -320,7 +330,8 @@ export function InlineEdit(p: InlineEditProps) {
     </select>
   ) : (
     <input
-      className={cx("tf-input tf-inline-input", p.mono && "tf-mono")}
+      className={cx("tf-input tf-inline-input", p.mono && "tf-mono", p.className)}
+      style={p.style}
       autoFocus
       value={v[0]}
       type={p.type || "text"}