@stigmer/react 3.9.0 → 3.11.0

package/src/resource-workbench/components/ResourceWorkbench.tsx

@@ -312,13 +312,13 @@ export function ResourceWorkbench<TData = SearchResult>({
   return (
     <div
       aria-label={ariaLabel}
-      className={cn("flex flex-col gap-3", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-3", className)}
     >
       {/* --- Toolbar: search + filters + view switcher --- */}
-      <div className="flex flex-wrap items-center gap-2">
+      <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-2">
         {searchable ? (
-          <div className="relative flex-1">
-            <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground-subtle" />
+          <div className="stg:relative stg:flex-1">
+            <SearchIcon className="stg:pointer-events-none stg:absolute stg:left-2.5 stg:top-1/2 stg:h-3.5 stg:w-3.5 stg:-translate-y-1/2 stg:text-muted-foreground-subtle" />
             <input
               type="text"
               value={filtersHook.query}
@@ -326,16 +326,16 @@ export function ResourceWorkbench<TData = SearchResult>({
               placeholder={searchPlaceholder}
               aria-label={searchPlaceholder}
               className={cn(
-                "w-full rounded-md border border-input bg-background py-1.5 pl-8 pr-3 text-sm",
-                "placeholder:text-muted-foreground-subtle",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:py-1.5 stg:pl-8 stg:pr-3 stg:text-sm",
+                "stg:placeholder:text-muted-foreground-subtle",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
               )}
             />
           </div>
         ) : (
           // Spacer keeps the scope toggle / view switcher / header action
           // right-aligned, matching the searchable layout.
-          <div className="flex-1" aria-hidden="true" />
+          <div className="stg:flex-1" aria-hidden="true" />
         )}
         {onScopeChange && (
           <ScopeToggle value={controlledScope} onChange={onScopeChange} />
@@ -359,12 +359,12 @@ export function ResourceWorkbench<TData = SearchResult>({
       />
 
       {/* --- Main content area with optional inspector --- */}
-      <div className="flex min-h-0 flex-1">
+      <div className="stg:flex stg:min-h-0 stg:flex-1">
         <div
           className={cn(
-            "min-w-0 flex-1",
+            "stg:min-w-0 stg:flex-1",
             collection.isRefetching &&
-              "pointer-events-none opacity-60 transition-opacity",
+              "stg:pointer-events-none stg:opacity-60 stg:transition-opacity",
           )}
         >
           {showSkeletons && <SkeletonPlaceholder viewMode={viewMode} />}
@@ -503,22 +503,22 @@ function defaultGetId(item: unknown): string {
 function DefaultCardContent({ item }: { readonly item: SearchResult }) {
   const isSkill = item.kind === ApiResourceKind.skill;
   return (
-    <div className="flex items-start gap-3">
+    <div className="stg:flex stg:items-start stg:gap-3">
       <ResourceAvatar
         name={item.name || item.slug}
         slug={item.slug}
         iconUrl={item.iconUrl || undefined}
         hidden={isSkill}
       />
-      <div className="min-w-0 flex-1">
-        <span className="text-sm font-medium text-foreground">
+      <div className="stg:min-w-0 stg:flex-1">
+        <span className="stg:text-sm stg:font-medium stg:text-foreground">
           {item.name || item.slug}
         </span>
         {item.org && (
-          <p className="text-xs text-muted-foreground">{item.org}</p>
+          <p className="stg:text-xs stg:text-muted-foreground">{item.org}</p>
         )}
         {item.description && (
-          <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
+          <p className="stg:mt-0.5 stg:line-clamp-2 stg:text-xs stg:text-muted-foreground">
             {item.description}
           </p>
         )}
@@ -530,7 +530,7 @@ function DefaultCardContent({ item }: { readonly item: SearchResult }) {
 function DefaultRowContent({ item }: { readonly item: SearchResult }) {
   const isSkill = item.kind === ApiResourceKind.skill;
   return (
-    <div className="flex items-center gap-2">
+    <div className="stg:flex stg:items-center stg:gap-2">
       <ResourceAvatar
         name={item.name || item.slug}
         slug={item.slug}
@@ -538,18 +538,18 @@ function DefaultRowContent({ item }: { readonly item: SearchResult }) {
         hidden={isSkill}
         size="sm"
       />
-      <span className="text-sm font-medium text-foreground">
+      <span className="stg:text-sm stg:font-medium stg:text-foreground">
         {item.name || item.slug}
       </span>
       {item.org && (
-        <span className="text-xs text-muted-foreground">{item.org}</span>
+        <span className="stg:text-xs stg:text-muted-foreground">{item.org}</span>
       )}
       {item.description && (
         <>
-          <span className="text-muted-foreground-subtle" aria-hidden="true">
+          <span className="stg:text-muted-foreground-subtle" aria-hidden="true">
             {"\u00B7"}
           </span>
-          <span className="truncate text-xs text-muted-foreground">
+          <span className="stg:truncate stg:text-xs stg:text-muted-foreground">
             {item.description}
           </span>
         </>
@@ -570,18 +570,18 @@ function SkeletonPlaceholder({
   if (viewMode === "cards") {
     return (
       <div
-        className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
+        className="stg:grid stg:grid-cols-1 stg:gap-3 stg:sm:grid-cols-2 stg:lg:grid-cols-3"
         aria-busy="true"
       >
         {Array.from({ length: 6 }, (_, i) => (
           <div
             key={i}
-            className="flex flex-col gap-3 rounded-lg border border-border bg-card p-4"
+            className="stg:flex stg:flex-col stg:gap-3 stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-4"
             aria-hidden="true"
           >
-            <div className="h-4 w-3/5 animate-pulse rounded bg-muted" />
-            <div className="h-3 w-2/5 animate-pulse rounded bg-muted" />
-            <div className="h-3 w-full animate-pulse rounded bg-muted" />
+            <div className="stg:h-4 stg:w-3/5 stg:animate-pulse stg:rounded stg:bg-muted" />
+            <div className="stg:h-3 stg:w-2/5 stg:animate-pulse stg:rounded stg:bg-muted" />
+            <div className="stg:h-3 stg:w-full stg:animate-pulse stg:rounded stg:bg-muted" />
           </div>
         ))}
       </div>
@@ -593,17 +593,17 @@ function SkeletonPlaceholder({
       {Array.from({ length: 5 }, (_, i) => (
         <div
           key={i}
-          className="flex items-center gap-3 px-3 py-2.5"
+          className="stg:flex stg:items-center stg:gap-3 stg:px-3 stg:py-2.5"
           aria-hidden="true"
         >
-          <div className="h-4 w-4 shrink-0 animate-pulse rounded bg-muted" />
-          <div className="flex-1 space-y-2">
+          <div className="stg:h-4 stg:w-4 stg:shrink-0 stg:animate-pulse stg:rounded stg:bg-muted" />
+          <div className="stg:flex-1 stg:space-y-2">
             <div
-              className="h-4 animate-pulse rounded bg-muted"
+              className="stg:h-4 stg:animate-pulse stg:rounded stg:bg-muted"
               style={{ width: `${30 + (i * 7) % 25}%` }}
             />
             <div
-              className="h-3 animate-pulse rounded bg-muted"
+              className="stg:h-3 stg:animate-pulse stg:rounded stg:bg-muted"
               style={{ width: `${55 + (i * 5) % 20}%` }}
             />
           </div>
@@ -629,23 +629,23 @@ function PaginationBar({
   readonly onPageChange: (page: number) => void;
 }) {
   const navBtnClass = cn(
-    "inline-flex items-center rounded-md p-1.5",
-    "border border-input bg-background text-foreground",
-    "hover:bg-accent hover:text-accent-foreground",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-    "disabled:pointer-events-none disabled:opacity-50",
+    "stg:inline-flex stg:items-center stg:rounded-md stg:p-1.5",
+    "stg:border stg:border-input stg:bg-background stg:text-foreground",
+    "stg:hover:bg-accent stg:hover:text-accent-foreground",
+    "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+    "stg:disabled:pointer-events-none stg:disabled:opacity-50",
   );
 
   return (
     <nav
       aria-label="Pagination"
-      className="flex items-center justify-between border-t border-border pt-3"
+      className="stg:flex stg:items-center stg:justify-between stg:border-t stg:border-border stg:pt-3"
     >
-      <span className="text-xs text-muted-foreground">
+      <span className="stg:text-xs stg:text-muted-foreground">
         {totalCount.toLocaleString()}{" "}
         {totalCount === 1 ? "result" : "results"}
       </span>
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="button"
           onClick={() => onPageChange(currentPage - 1)}
@@ -655,7 +655,7 @@ function PaginationBar({
         >
           <ChevronLeftIcon />
         </button>
-        <span className="text-xs text-muted-foreground">
+        <span className="stg:text-xs stg:text-muted-foreground">
           Page {currentPage} of {totalPages}
         </span>
         <button
@@ -697,7 +697,7 @@ function SearchIcon({ className }: { readonly className?: string }) {
 function ChevronLeftIcon() {
   return (
     <svg
-      className="h-3.5 w-3.5"
+      className="stg:h-3.5 stg:w-3.5"
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
@@ -714,7 +714,7 @@ function ChevronLeftIcon() {
 function ChevronRightIcon() {
   return (
     <svg
-      className="h-3.5 w-3.5"
+      className="stg:h-3.5 stg:w-3.5"
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"

package/src/resource-workbench/components/SelectionCheckbox.tsx

@@ -43,8 +43,8 @@ export function SelectionCheckbox({
       onChange={(e) => onChange(e.target.checked)}
       aria-label={ariaLabel}
       className={cn(
-        "size-3.5 shrink-0 cursor-pointer rounded border border-input accent-primary",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        "stg:size-3.5 stg:shrink-0 stg:cursor-pointer stg:rounded stg:border stg:border-input stg:accent-primary",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:ring-offset-1",
         className,
       )}
     />

package/src/resource-workbench/components/StatusBadge.tsx

@@ -53,13 +53,13 @@ export function StatusBadge({
   const badge = (
     <span
       className={cn(
-        "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium leading-none",
+        "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-full stg:px-2 stg:py-0.5 stg:text-[11px] stg:font-medium stg:leading-none",
         statusClasses(phase),
         className,
       )}
     >
       <span
-        className={cn("size-1.5 shrink-0 rounded-full", dotClasses(phase))}
+        className={cn("stg:size-1.5 stg:shrink-0 stg:rounded-full", dotClasses(phase))}
         aria-hidden="true"
       />
       {displayLabel}
@@ -69,7 +69,7 @@ export function StatusBadge({
   if (!tooltip) return badge;
 
   return (
-    <span title={tooltip} className="inline-flex">
+    <span title={tooltip} className="stg:inline-flex">
       {badge}
     </span>
   );
@@ -82,19 +82,19 @@ export function StatusBadge({
 function statusClasses(phase: StatusPhase): string {
   switch (phase) {
     case "ready":
-      return "bg-[var(--stgm-status-ready-subtle)] text-[var(--stgm-status-ready)]";
+      return "stg:bg-[var(--stgm-status-ready-subtle)] stg:text-[var(--stgm-status-ready)]";
     case "running":
-      return "bg-[var(--stgm-status-running-subtle)] text-[var(--stgm-status-running)]";
+      return "stg:bg-[var(--stgm-status-running-subtle)] stg:text-[var(--stgm-status-running)]";
     case "pending":
-      return "bg-[var(--stgm-status-pending-subtle)] text-[var(--stgm-status-pending)]";
+      return "stg:bg-[var(--stgm-status-pending-subtle)] stg:text-[var(--stgm-status-pending)]";
     case "degraded":
-      return "bg-[var(--stgm-status-degraded-subtle)] text-[var(--stgm-status-degraded)]";
+      return "stg:bg-[var(--stgm-status-degraded-subtle)] stg:text-[var(--stgm-status-degraded)]";
     case "failed":
-      return "bg-[var(--stgm-status-failed-subtle)] text-[var(--stgm-status-failed)]";
+      return "stg:bg-[var(--stgm-status-failed-subtle)] stg:text-[var(--stgm-status-failed)]";
     case "disabled":
-      return "bg-[var(--stgm-status-disabled-subtle)] text-[var(--stgm-status-disabled)]";
+      return "stg:bg-[var(--stgm-status-disabled-subtle)] stg:text-[var(--stgm-status-disabled)]";
     case "draft":
-      return "bg-[var(--stgm-status-draft-subtle)] text-[var(--stgm-status-draft)]";
+      return "stg:bg-[var(--stgm-status-draft-subtle)] stg:text-[var(--stgm-status-draft)]";
   }
 }
 
@@ -102,18 +102,18 @@ function statusClasses(phase: StatusPhase): string {
 function dotClasses(phase: StatusPhase): string {
   switch (phase) {
     case "ready":
-      return "bg-[var(--stgm-status-ready)]";
+      return "stg:bg-[var(--stgm-status-ready)]";
     case "running":
-      return "bg-[var(--stgm-status-running)]";
+      return "stg:bg-[var(--stgm-status-running)]";
     case "pending":
-      return "bg-[var(--stgm-status-pending)]";
+      return "stg:bg-[var(--stgm-status-pending)]";
     case "degraded":
-      return "bg-[var(--stgm-status-degraded)]";
+      return "stg:bg-[var(--stgm-status-degraded)]";
     case "failed":
-      return "bg-[var(--stgm-status-failed)]";
+      return "stg:bg-[var(--stgm-status-failed)]";
     case "disabled":
-      return "bg-[var(--stgm-status-disabled)]";
+      return "stg:bg-[var(--stgm-status-disabled)]";
     case "draft":
-      return "bg-[var(--stgm-status-draft)]";
+      return "stg:bg-[var(--stgm-status-draft)]";
   }
 }

package/src/resource-workbench/components/ViewSwitcher.tsx

@@ -38,7 +38,7 @@ export function ViewSwitcher({
     <div
       role="radiogroup"
       aria-label="View mode"
-      className={cn("inline-flex rounded-md border border-input", className)}
+      className={cn("stg:inline-flex stg:rounded-md stg:border stg:border-input", className)}
     >
       {modes.map((mode) => {
         const { label, icon: Icon } = MODE_META[mode];
@@ -52,13 +52,13 @@ export function ViewSwitcher({
             aria-label={label}
             onClick={() => onChange(mode)}
             className={cn(
-              "inline-flex items-center justify-center px-2 py-1.5 transition-colors",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:z-10",
-              "first:rounded-l-[calc(var(--stgm-radius)-1px)] last:rounded-r-[calc(var(--stgm-radius)-1px)]",
-              "border-r border-input last:border-r-0",
+              "stg:inline-flex stg:items-center stg:justify-center stg:px-2 stg:py-1.5 stg:transition-colors",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:z-10",
+              "stg:first:rounded-l-[calc(var(--stgm-radius)-1px)] stg:last:rounded-r-[calc(var(--stgm-radius)-1px)]",
+              "stg:border-r stg:border-input stg:last:border-r-0",
               isActive
-                ? "bg-accent text-accent-foreground"
-                : "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
+                ? "stg:bg-accent stg:text-accent-foreground"
+                : "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
             )}
           >
             <Icon />

package/src/schedule/CadenceField.tsx

@@ -71,15 +71,15 @@ export function CadenceField({
       : null;
 
   return (
-    <div className="space-y-2">
+    <div className="stg:space-y-2">
       {/* Preset selector — segmented radio group, matching ScopeToggle's pattern */}
       <div
         role="radiogroup"
         aria-label="Cadence"
         aria-disabled={disabled || undefined}
         className={cn(
-          "inline-flex flex-wrap rounded-md bg-muted p-0.5",
-          disabled && "pointer-events-none opacity-50",
+          "stg:inline-flex stg:flex-wrap stg:rounded-md stg:bg-muted stg:p-0.5",
+          disabled && "stg:pointer-events-none stg:opacity-50",
         )}
       >
         {KIND_OPTIONS.map((option) => {
@@ -106,11 +106,11 @@ export function CadenceField({
                 }
               }}
               className={cn(
-                "inline-flex cursor-pointer items-center rounded-sm px-2.5 py-1 text-xs font-medium transition-colors",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "stg:inline-flex stg:cursor-pointer stg:items-center stg:rounded-sm stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
                 isSelected
-                  ? "bg-background text-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground",
+                  ? "stg:bg-background stg:text-foreground stg:shadow-sm"
+                  : "stg:text-muted-foreground stg:hover:text-foreground",
               )}
             >
               {option.label}
@@ -121,7 +121,7 @@ export function CadenceField({
 
       {/* Per-preset inputs */}
       {value.kind === "hourly" && (
-        <div className="flex items-center gap-2 text-xs text-foreground">
+        <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-foreground">
           <label htmlFor={`${groupId}-minute`}>At minute</label>
           <input
             id={`${groupId}-minute`}
@@ -152,11 +152,11 @@ export function CadenceField({
       )}
 
       {value.kind === "weekly" && (
-        <div className="space-y-2">
+        <div className="stg:space-y-2">
           <div
             role="group"
             aria-label="Days of week"
-            className="flex flex-wrap gap-1"
+            className="stg:flex stg:flex-wrap stg:gap-1"
           >
             {WEEKDAY_LABELS.map((label, day) => {
               const isOn = value.days.includes(day);
@@ -180,13 +180,13 @@ export function CadenceField({
                     })
                   }
                   className={cn(
-                    "inline-flex h-7 w-9 items-center justify-center rounded-md border text-xs font-medium transition-colors",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    "disabled:pointer-events-none",
+                    "stg:inline-flex stg:h-7 stg:w-9 stg:items-center stg:justify-center stg:rounded-md stg:border stg:text-xs stg:font-medium stg:transition-colors",
+                    "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                    "stg:disabled:pointer-events-none",
                     isOn
-                      ? "border-primary bg-primary text-primary-foreground"
-                      : "border-input bg-background text-muted-foreground hover:text-foreground",
-                    isLastSelected && "opacity-70",
+                      ? "stg:border-primary stg:bg-primary stg:text-primary-foreground"
+                      : "stg:border-input stg:bg-background stg:text-muted-foreground stg:hover:text-foreground",
+                    isLastSelected && "stg:opacity-70",
                   )}
                 >
                   {label.slice(0, 3)}
@@ -205,8 +205,8 @@ export function CadenceField({
       )}
 
       {value.kind === "monthly" && (
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-xs text-foreground">
+        <div className="stg:space-y-2">
+          <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-foreground">
             <label htmlFor={`${groupId}-day`}>On day</label>
             <input
               id={`${groupId}-day`}
@@ -223,10 +223,10 @@ export function CadenceField({
               disabled={disabled}
               className={numberInputClasses}
             />
-            <span className="text-muted-foreground">of every month</span>
+            <span className="stg:text-muted-foreground">of every month</span>
           </div>
           {value.day >= 29 && (
-            <p className="text-[0.65rem] text-muted-foreground">
+            <p className="stg:text-[0.65rem] stg:text-muted-foreground">
               Months without day {value.day} are skipped — February never
               fires a day-{value.day} schedule
               {value.day === 29 ? " except in leap years" : ""}.
@@ -243,7 +243,7 @@ export function CadenceField({
       )}
 
       {value.kind === "custom" && (
-        <div className="space-y-1">
+        <div className="stg:space-y-1">
           <input
             type="text"
             aria-label="Cron expression"
@@ -252,19 +252,19 @@ export function CadenceField({
             onChange={(e) => onChange({ kind: "custom", cron: e.target.value })}
             disabled={disabled}
             className={cn(
-              "w-full rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs text-foreground",
-              "placeholder:font-sans placeholder:text-muted-foreground",
-              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
-              cronError && "border-destructive",
+              "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:font-mono stg:text-xs stg:text-foreground",
+              "stg:placeholder:font-sans stg:placeholder:text-muted-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+              cronError && "stg:border-destructive",
             )}
           />
           {cronError ? (
-            <p className="text-[0.65rem] text-destructive" role="alert">
+            <p className="stg:text-[0.65rem] stg:text-destructive" role="alert">
               {cronError}
             </p>
           ) : (
-            <p className="text-[0.65rem] text-muted-foreground">
+            <p className="stg:text-[0.65rem] stg:text-muted-foreground">
               5 fields (minute hour day-of-month month day-of-week) or
               @hourly, @daily, @weekly, @monthly, @yearly.
             </p>
@@ -274,7 +274,7 @@ export function CadenceField({
 
       {/* Plain-English summary of the chosen cadence */}
       {!(value.kind === "custom" && (cronError || value.cron.trim() === "")) && (
-        <p className="text-xs text-muted-foreground" data-testid="cadence-summary">
+        <p className="stg:text-xs stg:text-muted-foreground" data-testid="cadence-summary">
           {describeCadence(value, timeZone)}
         </p>
       )}
@@ -287,9 +287,9 @@ export function CadenceField({
 // ---------------------------------------------------------------------------
 
 const numberInputClasses = cn(
-  "w-16 rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground",
-  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-  "disabled:pointer-events-none disabled:opacity-50",
+  "stg:w-16 stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2 stg:py-1 stg:text-xs stg:text-foreground",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
 );
 
 function TimeInput({
@@ -306,7 +306,7 @@ function TimeInput({
   readonly onChange: (hour: number, minute: number) => void;
 }) {
   return (
-    <div className="flex items-center gap-2 text-xs text-foreground">
+    <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-foreground">
       <label htmlFor={id}>At</label>
       <input
         id={id}
@@ -318,9 +318,9 @@ function TimeInput({
         }}
         disabled={disabled}
         className={cn(
-          "rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          "disabled:pointer-events-none disabled:opacity-50",
+          "stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2 stg:py-1 stg:text-xs stg:text-foreground",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+          "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         )}
       />
     </div>