@orsetra/shared-ui 1.3.17 → 1.4.0

package/components/ui/alert-dialog.tsx

@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-ibm-gray-100/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-ibm-gray-20 bg-white p-6 shadow-xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-ibm-gray-20 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         className
       )}
       {...props}
@@ -103,7 +103,7 @@ const AlertDialogAction = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Action asChild>
-    <Button ref={ref} className={className} {...props} />
+    <Button ref={ref} className={cn("rounded-none", className)} {...props} />
   </AlertDialogPrimitive.Action>
 ))
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
@@ -113,7 +113,7 @@ const AlertDialogCancel = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel asChild>
-    <Button ref={ref} variant="secondary" className={cn("mt-2 sm:mt-0", className)} {...props} />
+    <Button ref={ref} variant="secondary" className={cn("rounded-none mt-2 sm:mt-0", className)} {...props} />
   </AlertDialogPrimitive.Cancel>
 ))
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

package/components/ui/code-editor.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import React from "react"
+
+interface CodeEditorProps {
+  id?: string
+  value?: string
+  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
+  placeholder?: string
+  disabled?: boolean
+  required?: boolean
+  className?: string
+  rows?: number
+}
+
+export function CodeEditor({
+  id,
+  value,
+  onChange,
+  onBlur,
+  placeholder,
+  disabled,
+  required,
+  className = "",
+  rows = 14,
+}: CodeEditorProps) {
+  return (
+    <textarea
+      id={id}
+      value={value ?? ""}
+      onChange={onChange}
+      onBlur={onBlur}
+      placeholder={placeholder}
+      disabled={disabled}
+      required={required}
+      rows={rows}
+      spellCheck={false}
+      className={`w-full font-mono text-xs text-ibm-gray-80 bg-ibm-gray-10 border border-ibm-gray-30 px-3 py-2 resize-y focus:outline-none focus:ring-1 focus:ring-ibm-blue-60 placeholder:text-ibm-gray-40 disabled:opacity-50 ${className}`}
+    />
+  )
+}

package/components/ui/confirmation-dialog.tsx

@@ -125,6 +125,7 @@ export function ConfirmationDialog({
               }
               disabled={loading}
               autoComplete="off"
+              className="rounded-none"
             />
           </div>
         )}

package/components/ui/environment-picker-dialog.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "./dialog"
+import { Loader2, Globe } from "lucide-react"
+
+interface Environment {
+  name: string
+  alias?: string
+}
+
+export interface EnvironmentPickerDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  projectName: string
+  fetchEnvironments: (projectName: string) => Promise<{ envs: Environment[] }>
+  onSelect: (envName: string) => void
+  excludeEnvs?: string[]
+  title?: string
+  description?: string
+}
+
+export function EnvironmentPickerDialog({
+  open,
+  onOpenChange,
+  projectName,
+  fetchEnvironments,
+  onSelect,
+  excludeEnvs = [],
+  title = "Select an environment",
+  description,
+}: EnvironmentPickerDialogProps) {
+  const [environments, setEnvironments] = useState<Environment[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (open) loadEnvironments()
+  }, [open])
+
+  const loadEnvironments = async () => {
+    setLoading(true)
+    try {
+      const response = await fetchEnvironments(projectName)
+      const all = response.envs || []
+      setEnvironments(excludeEnvs.length ? all.filter((e) => !excludeEnvs.includes(e.name)) : all)
+    } catch {
+      // silent
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="rounded-none max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+
+        <div className="mt-4">
+          {loading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-5 w-5 animate-spin text-ibm-blue-60" />
+              <span className="ml-2 text-sm text-ibm-gray-70">Loading environments...</span>
+            </div>
+          ) : environments.length === 0 ? (
+            <div className="text-center py-8 text-sm text-ibm-gray-60">
+              No environments found
+            </div>
+          ) : (
+            <div className="border border-ibm-gray-20 max-h-60 overflow-y-auto">
+              {environments.map((env, index) => (
+                <button
+                  key={env.name}
+                  type="button"
+                  className={`w-full text-left px-4 py-3 hover:bg-ibm-gray-10 transition-colors flex items-center gap-3 ${index !== environments.length - 1 ? "border-b border-ibm-gray-20" : ""}`}
+                  onClick={() => {
+                    onSelect(env.name)
+                    onOpenChange(false)
+                  }}
+                >
+                  <Globe className="h-4 w-4 text-ibm-gray-70 flex-shrink-0" />
+                  <span className="text-sm font-medium text-ibm-gray-100">
+                    {env.alias || env.name}
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/components/ui/index.ts

@@ -65,3 +65,12 @@ export { Toggle } from './toggle'
 export { StringsInput } from './strings-input'
 export { KVInput } from './kv-input'
 export { NumbersInput } from './numbers-input'
+export { KVDynamicInput } from './kv-dynamic-input'
+export { SelectInput } from './select-input'
+export { SecretContextProvider, useSecretContext, type SecretEntry } from './secret-context'
+export { SecretInput } from './secret-input'
+export { SecretsInput } from './secrets-input'
+export { StructsInput } from './structs-input'
+export { CodeEditor } from './code-editor'
+export { K8sObjectsCode } from './k8s-objects-code'
+export { EnvironmentPickerDialog, type EnvironmentPickerDialogProps } from './environment-picker-dialog'

package/components/ui/k8s-objects-code.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import React, { useState, useEffect } from "react"
+import * as yaml from "js-yaml"
+
+interface K8sObjectsCodeProps {
+  id?: string
+  value?: any[] | string
+  onChange?: (val: any[]) => void
+  disabled?: boolean
+  required?: boolean
+  className?: string
+}
+
+function toYamlStr(val: any[] | string | undefined): string {
+  if (!val) return ""
+  if (typeof val === "string") return val
+  try {
+    return yaml.dump(val, { lineWidth: -1, noRefs: true })
+  } catch {
+    return JSON.stringify(val, null, 2)
+  }
+}
+
+export function K8sObjectsCode({ id, value, onChange, disabled, required, className = "" }: K8sObjectsCodeProps) {
+  const [text, setText] = useState(() => toYamlStr(value))
+  const [parseError, setParseError] = useState<string | null>(null)
+
+  useEffect(() => {
+    setText(toYamlStr(value))
+  }, [value])
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const raw = e.target.value
+    setText(raw)
+    if (!raw.trim()) {
+      setParseError(null)
+      onChange?.([])
+      return
+    }
+    try {
+      const docs = yaml.loadAll(raw) as any[]
+      const arr = docs.flat().filter(Boolean)
+      setParseError(null)
+      onChange?.(arr)
+    } catch (err: any) {
+      setParseError(err.message?.split("\n")[0] ?? "Invalid YAML")
+    }
+  }
+
+  return (
+    <div className="space-y-1">
+      <textarea
+        id={id}
+        value={text}
+        onChange={handleChange}
+        disabled={disabled}
+        required={required}
+        rows={14}
+        spellCheck={false}
+        placeholder={"- from:\n    uri: timer:tick\n  steps:\n    - to: log:hello"}
+        className={`w-full font-mono text-xs text-ibm-gray-80 bg-ibm-gray-10 border px-3 py-2 resize-y focus:outline-none focus:ring-1 focus:ring-ibm-blue-60 disabled:opacity-50 ${parseError ? "border-red-500" : "border-ibm-gray-30"} ${className}`}
+      />
+      {parseError && (
+        <p className="text-xs text-red-500 font-mono break-all">{parseError}</p>
+      )}
+    </div>
+  )
+}

package/components/ui/kv-dynamic-input.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { Input } from "./input"
+import { Plus, X } from "lucide-react"
+
+interface KVDynamicInputProps {
+  value?: Record<string, string>
+  onChange?: (value: Record<string, string>) => void
+  disabled?: boolean
+}
+
+export function KVDynamicInput({ value = {}, onChange, disabled = false }: KVDynamicInputProps) {
+  const [pairs, setPairs] = useState<Record<string, string>>(value)
+  const [showAdd, setShowAdd] = useState(false)
+  const [draftKey, setDraftKey] = useState("")
+  const [draftValue, setDraftValue] = useState("")
+  const keyRef = useRef<HTMLInputElement>(null)
+  const skipSync = useRef(false)
+
+  useEffect(() => {
+    if (skipSync.current) { skipSync.current = false; return }
+    setPairs(value ?? {})
+  }, [value])
+
+  useEffect(() => {
+    if (showAdd) keyRef.current?.focus()
+  }, [showAdd])
+
+  const emit = (next: Record<string, string>) => {
+    skipSync.current = true
+    onChange?.(next)
+  }
+
+  const handleAdd = () => {
+    const key = draftKey.trim()
+    if (!key) return
+    const next = { ...pairs, [key]: draftValue.trim() }
+    setPairs(next)
+    emit(next)
+    setDraftKey("")
+    setDraftValue("")
+    setShowAdd(false)
+  }
+
+  const handleRemove = (key: string) => {
+    const next = { ...pairs }
+    delete next[key]
+    setPairs(next)
+    emit(next)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") { e.preventDefault(); handleAdd() }
+    if (e.key === "Escape") { setShowAdd(false); setDraftKey(""); setDraftValue("") }
+  }
+
+  return (
+    <div className="space-y-2">
+      {/* Chips row */}
+      <div className="flex flex-wrap items-center gap-2">
+        {Object.entries(pairs).map(([key, val]) => (
+          <span key={key} className="inline-flex items-center gap-1 px-2 py-1 bg-ibm-gray-10 border border-ibm-gray-20 text-xs font-mono">
+            <span className="text-ibm-gray-100">{key}</span>
+            {val && <><span className="text-ibm-gray-40">=</span><span className="text-ibm-blue-70">{val}</span></>}
+            {!disabled && (
+              <button type="button" onClick={() => handleRemove(key)} className="ml-0.5 text-ibm-gray-50 hover:text-red-600 transition-colors">
+                <X className="h-3 w-3" />
+              </button>
+            )}
+          </span>
+        ))}
+
+        {/* Add trigger */}
+        {!showAdd && !disabled && (
+          <button
+            type="button"
+            onClick={() => setShowAdd(true)}
+            className="inline-flex items-center justify-center h-6 w-6 border border-dashed border-ibm-gray-30 text-ibm-gray-50 hover:border-ibm-blue-60 hover:text-ibm-blue-60 transition-colors"
+          >
+            <Plus className="h-3.5 w-3.5" />
+          </button>
+        )}
+      </div>
+
+      {/* Inline add row */}
+      {showAdd && (
+        <div className="flex items-center gap-2">
+          <Input
+            ref={keyRef}
+            placeholder="Key"
+            value={draftKey}
+            onChange={(e) => setDraftKey(e.target.value)}
+            onKeyDown={handleKeyDown}
+            className="rounded-none flex-1 h-10"
+          />
+          <Input
+            placeholder="Value"
+            value={draftValue}
+            onChange={(e) => setDraftValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            className="rounded-none flex-1 h-10"
+          />
+          <button
+            type="button"
+            onClick={handleAdd}
+            disabled={!draftKey.trim()}
+            className="h-10 w-9 flex items-center justify-center border border-ibm-gray-30 bg-white text-ibm-gray-60 hover:bg-ibm-blue-10 hover:border-ibm-blue-60 hover:text-ibm-blue-60 disabled:opacity-40 disabled:pointer-events-none transition-colors flex-shrink-0"
+          >
+            <Plus className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

package/components/ui/kv-input.tsx

@@ -18,7 +18,7 @@ interface KVInputProps {
   valuePlaceholder?: string
 }
 
-const BTN = "rounded-none h-9 w-9 p-0 flex-shrink-0"
+const BTN = "rounded-none h-10 w-10 p-0 flex-shrink-0"
 
 export function KVInput({
   value = {},

package/components/ui/secret-context.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { createContext, useContext } from "react"
+import type { ReactNode } from "react"
+
+export interface SecretEntry {
+  name: string
+  description?: string
+}
+
+interface SecretContextValue {
+  templateId?: string
+  fetchSecrets: (templateId?: string) => Promise<SecretEntry[]>
+}
+
+const SecretContext = createContext<SecretContextValue | null>(null)
+
+export function SecretContextProvider({
+  children,
+  templateId,
+  fetchSecrets,
+}: {
+  children: ReactNode
+  templateId?: string
+  fetchSecrets: (templateId?: string) => Promise<SecretEntry[]>
+}) {
+  return (
+    <SecretContext.Provider value={{ templateId, fetchSecrets }}>
+      {children}
+    </SecretContext.Provider>
+  )
+}
+
+export function useSecretContext(): SecretContextValue | null {
+  return useContext(SecretContext)
+}

package/components/ui/secret-input.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Loader2 } from "lucide-react"
+import { SelectInput } from "./select-input"
+import { useSecretContext } from "./secret-context"
+import type { SecretEntry } from "./secret-context"
+
+interface SecretInputProps {
+  id?: string
+  type?: string
+  value?: string
+  onChange?: (value: string) => void
+  disabled?: boolean
+  className?: string
+  placeholder?: string
+}
+
+export function SecretInput({
+  id,
+  type,
+  value,
+  onChange,
+  disabled,
+  className,
+  placeholder = "Select a secret",
+}: SecretInputProps) {
+  const ctx = useSecretContext()
+  const [secrets, setSecrets] = useState<SecretEntry[]>([])
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (!ctx) return
+    setLoading(true)
+    ctx.fetchSecrets(type === "configs" ? ctx.templateId : type)
+      .then(setSecrets)
+      .catch(() => setSecrets([]))
+      .finally(() => setLoading(false))
+  }, [ctx?.templateId])
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 h-10 px-3 border border-ibm-gray-30 bg-white text-sm text-ibm-gray-60">
+        <Loader2 className="h-4 w-4 animate-spin flex-shrink-0" />
+        Loading secrets…
+      </div>
+    )
+  }
+
+  if (!ctx) {
+    return (
+      <div className="flex items-center h-10 px-3 border border-ibm-gray-30 bg-ibm-gray-10 text-sm text-ibm-gray-50">
+        No secret context provided
+      </div>
+    )
+  }
+
+  return (
+    <SelectInput
+      id={id}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      className={className}
+      placeholder={placeholder}
+      options={secrets.map((s) => ({ label: s.description || s.name, value: s.name }))}
+    />
+  )
+}

package/components/ui/secrets-input.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "./button"
+import { X, Plus } from "lucide-react"
+import { SecretInput } from "./secret-input"
+
+interface SecretsInputProps {
+  id?: string
+  value?: string[]
+  onChange?: (value: string[]) => void
+  disabled?: boolean
+  [key: string]: any
+}
+
+export function SecretsInput({ id, value = [], onChange, disabled = false, ...rest }: SecretsInputProps) {
+  const [items, setItems] = useState<string[]>(value.filter(Boolean))
+  const [draft, setDraft] = useState("")
+
+  useEffect(() => {
+    const filtered = value.filter(Boolean)
+    if (JSON.stringify(filtered) !== JSON.stringify(items)) {
+      setItems(filtered)
+    }
+  }, [value])
+
+  const handleAdd = () => {
+    if (!draft || items.includes(draft)) return
+    const next = [...items, draft]
+    setItems(next)
+    onChange?.(next)
+    setDraft("")
+  }
+
+  const handleRemove = (index: number) => {
+    const next = items.filter((_, i) => i !== index)
+    setItems(next)
+    onChange?.(next)
+  }
+
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => (
+        <div key={index} className="flex items-center gap-2">
+          <span className="flex-1 text-sm px-3 h-10 flex items-center border border-ibm-gray-20 bg-ibm-gray-10 text-ibm-gray-100 truncate font-mono">
+            {item}
+          </span>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => handleRemove(index)}
+            disabled={disabled}
+            className="rounded-none h-10 w-10 p-0 shrink-0"
+          >
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      ))}
+
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <SecretInput value={draft} onChange={setDraft} disabled={disabled} type={id} />
+        </div>
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={handleAdd}
+          disabled={disabled || !draft}
+          className="rounded-none h-10 w-10 p-0 shrink-0"
+        >
+          <Plus className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  )
+}

package/components/ui/select-input.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select"
+
+interface SelectOption {
+  label: string
+  value: any
+}
+
+interface SelectInputProps {
+  id?: string
+  value?: string
+  onChange?: (value: string) => void
+  options?: SelectOption[]
+  disabled?: boolean
+  required?: boolean
+  className?: string
+  placeholder?: string
+}
+
+export function SelectInput({
+  id,
+  value,
+  onChange,
+  options = [],
+  disabled = false,
+  className,
+  placeholder = "Select an option",
+}: SelectInputProps) {
+  return (
+    <Select value={value || undefined} onValueChange={onChange} disabled={disabled}>
+      <SelectTrigger id={id} className={className}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((opt) => (
+          <SelectItem key={String(opt.value)} value={String(opt.value)}>
+            {opt.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/components/ui/strings-input.tsx

@@ -54,7 +54,7 @@ export function StringsInput({
     <div className="space-y-2">
       {items.map((item, index) => (
         <div key={index} className="flex items-center gap-2">
-          <span className="flex-1 text-sm px-3 h-7 flex items-center border border-ibm-gray-20 bg-ibm-gray-10 text-ibm-gray-100 truncate">
+          <span className="flex-1 text-sm px-3 h-10 flex items-center border border-ibm-gray-20 bg-ibm-gray-10 text-ibm-gray-100 truncate">
             {item}
           </span>
           <Button
@@ -62,7 +62,7 @@ export function StringsInput({
             variant="secondary"
             onClick={() => handleRemove(index)}
             disabled={disabled}
-            className="rounded-none h-7 w-7 p-0 shrink-0"
+            className="rounded-none h-10 w-10 p-0 shrink-0"
           >
             <X className="h-3.5 w-3.5" />
           </Button>
@@ -75,14 +75,14 @@ export function StringsInput({
           onKeyDown={handleKeyDown}
           disabled={disabled}
           placeholder={placeholder}
-          className="rounded-none flex-1 h-7 text-sm"
+          className="rounded-none flex-1 h-10 text-sm"
         />
         <Button
           type="button"
           variant="secondary"
           onClick={handleAdd}
           disabled={disabled || !inputValue.trim()}
-          className="rounded-none h-7 w-7 p-0 shrink-0"
+          className="rounded-none h-10 w-10 p-0 shrink-0"
         >
           <Plus className="h-3.5 w-3.5" />
         </Button>

package/components/ui/structs-input.tsx

@@ -0,0 +1,331 @@
+"use client"
+
+import React, { useState, useEffect } from "react"
+import { Button } from "./button"
+import { Label } from "./label"
+import { Input } from "./input"
+import { Textarea } from "./textarea"
+import { Switch } from "./switch"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select"
+import { StringsInput } from "./strings-input"
+import { KVInput } from "./kv-input"
+import { NumbersInput } from "./numbers-input"
+import { Plus, Trash2, ChevronDown, ChevronRight } from "lucide-react"
+
+interface UIParamValidate {
+  required?: boolean
+  defaultValue?: any
+  options?: Array<{ label: string; value: any }>
+  immutable?: boolean
+}
+
+interface UIParam {
+  jsonKey: string
+  label?: string
+  uiType: string
+  validate?: UIParamValidate
+  subParameters?: UIParam[]
+}
+
+interface StructsInputProps {
+  id?: string
+  value?: any[]
+  onChange?: (value: any[]) => void
+  disabled?: boolean
+  subParameters?: UIParam[]
+  label?: string
+}
+
+interface StructItemProps {
+  index: number
+  value: any
+  onChange: (value: any) => void
+  onRemove: () => void
+  subParameters: UIParam[]
+  disabled?: boolean
+  isExpanded: boolean
+  onToggleExpand: () => void
+}
+
+function StructItem({ index, value, onChange, onRemove, subParameters, disabled, isExpanded, onToggleExpand }: StructItemProps) {
+  const handleFieldChange = (key: string, fieldValue: any) => {
+    onChange({ ...value, [key]: fieldValue })
+  }
+
+  const renderField = (param: UIParam) => {
+    const fieldValue = value?.[param.jsonKey] ?? param.validate?.defaultValue
+    const required = param.validate?.required || false
+    const fieldDisabled = disabled || (param.validate?.immutable) || false
+    const label = param.label || param.jsonKey
+
+    switch (param.uiType) {
+      case "Input":
+      case "ImageInput":
+        return (
+          <div key={param.jsonKey} className="space-y-1">
+            <Label htmlFor={`${param.jsonKey}-${index}`} className="text-xs">
+              {label}
+              {required && <span className="text-red-600 ml-1">*</span>}
+            </Label>
+            <Input
+              id={`${param.jsonKey}-${index}`}
+              value={fieldValue ?? ""}
+              onChange={(e) => handleFieldChange(param.jsonKey, e.target.value)}
+              disabled={fieldDisabled}
+              required={required}
+              className="rounded-none h-8 text-sm"
+            />
+          </div>
+        )
+
+      case "Textarea":
+        return (
+          <div key={param.jsonKey} className="space-y-1">
+            <Label htmlFor={`${param.jsonKey}-${index}`} className="text-xs">
+              {label}
+              {required && <span className="text-red-600 ml-1">*</span>}
+            </Label>
+            <Textarea
+              id={`${param.jsonKey}-${index}`}
+              value={fieldValue ?? ""}
+              onChange={(e) => handleFieldChange(param.jsonKey, e.target.value)}
+              disabled={fieldDisabled}
+              required={required}
+              className="rounded-none min-h-[60px] text-sm"
+            />
+          </div>
+        )
+
+      case "Number":
+        return (
+          <div key={param.jsonKey} className="space-y-1">
+            <Label htmlFor={`${param.jsonKey}-${index}`} className="text-xs">
+              {label}
+              {required && <span className="text-red-600 ml-1">*</span>}
+            </Label>
+            <Input
+              id={`${param.jsonKey}-${index}`}
+              type="number"
+              value={fieldValue ?? ""}
+              onChange={(e) => {
+                const val = e.target.value === "" ? undefined : Number(e.target.value)
+                handleFieldChange(param.jsonKey, val)
+              }}
+              disabled={fieldDisabled}
+              required={required}
+              className="rounded-none h-8 text-sm"
+            />
+          </div>
+        )
+
+      case "Switch":
+        return (
+          <div key={param.jsonKey} className="flex items-center space-x-2 py-1">
+            <Switch
+              id={`${param.jsonKey}-${index}`}
+              checked={fieldValue || false}
+              onCheckedChange={(checked) => handleFieldChange(param.jsonKey, checked)}
+              disabled={fieldDisabled}
+            />
+            <Label htmlFor={`${param.jsonKey}-${index}`} className="text-xs cursor-pointer">
+              {label}
+              {required && <span className="text-red-600 ml-1">*</span>}
+            </Label>
+          </div>
+        )
+
+      case "Select":
+        return (
+          <div key={param.jsonKey} className="space-y-1">
+            <Label htmlFor={`${param.jsonKey}-${index}`} className="text-xs">
+              {label}
+              {required && <span className="text-red-600 ml-1">*</span>}
+            </Label>
+            <Select
+              value={fieldValue || ""}
+              onValueChange={(val) => handleFieldChange(param.jsonKey, val)}
+              disabled={fieldDisabled}
+            >
+              <SelectTrigger className="rounded-none h-8 text-sm">
+                <SelectValue placeholder={`Select ${label}`} />
+              </SelectTrigger>
+              <SelectContent>
+                {param.validate?.options?.map((opt) => (
+                  <SelectItem key={opt.value} value={String(opt.value)}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )
+
+      case "KV":
+        return (
+          <div key={param.jsonKey} className="space-y-1">
+            <Label className="text-xs">
+              {label}
+              {required && <span className="text-red-600 ml-1">*</span>}
+            </Label>
+            <KVInput
+              value={fieldValue || {}}
+              onChange={(val) => handleFieldChange(param.jsonKey, val)}
+              disabled={fieldDisabled}
+            />
+          </div>
+        )
+
+      case "Strings":
+        return (
+          <div key={param.jsonKey} className="space-y-1">
+            <Label className="text-xs">
+              {label}
+              {required && <span className="text-red-600 ml-1">*</span>}
+            </Label>
+            <StringsInput
+              value={fieldValue || []}
+              onChange={(val) => handleFieldChange(param.jsonKey, val)}
+              disabled={fieldDisabled}
+            />
+          </div>
+        )
+
+      case "Numbers":
+        return (
+          <div key={param.jsonKey} className="space-y-1">
+            <Label className="text-xs">
+              {label}
+              {required && <span className="text-red-600 ml-1">*</span>}
+            </Label>
+            <NumbersInput
+              value={fieldValue || []}
+              onChange={(val) => handleFieldChange(param.jsonKey, val)}
+              disabled={fieldDisabled}
+            />
+          </div>
+        )
+
+      default:
+        return null
+    }
+  }
+
+  const displayName = value?.name || value?.containerName || `Item ${index + 1}`
+
+  return (
+    <div className="border border-ibm-gray-20 bg-white">
+      <div className="flex items-center justify-between p-3 bg-ibm-gray-10 border-b border-ibm-gray-20">
+        <button
+          type="button"
+          onClick={onToggleExpand}
+          className="flex items-center gap-2 flex-1 text-left hover:text-ibm-blue-60 transition-colors"
+        >
+          {isExpanded ? (
+            <ChevronDown className="h-4 w-4 text-ibm-gray-70" />
+          ) : (
+            <ChevronRight className="h-4 w-4 text-ibm-gray-70" />
+          )}
+          <span className="text-sm font-medium text-ibm-gray-100">{displayName}</span>
+        </button>
+        <button
+          type="button"
+          onClick={onRemove}
+          disabled={disabled}
+          className="p-1.5 text-ibm-gray-50 hover:text-ibm-red-60 hover:bg-ibm-red-10 transition-colors disabled:opacity-40"
+          title="Remove"
+        >
+          <Trash2 className="h-4 w-4" />
+        </button>
+      </div>
+
+      {isExpanded && (
+        <div className="p-4 space-y-3">
+          {subParameters.length === 0 ? (
+            <div className="text-sm text-ibm-gray-60 italic">
+              No fields defined for this structure
+            </div>
+          ) : (
+            subParameters.map((param) => renderField(param))
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function StructsInput({ id, value = [], onChange, disabled = false, subParameters = [], label }: StructsInputProps) {
+  const [items, setItems] = useState<any[]>(Array.isArray(value) ? value : [])
+  const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set([0]))
+
+  useEffect(() => {
+    setItems(Array.isArray(value) ? value : [])
+  }, [value])
+
+  const handleAdd = () => {
+    const newItem: any = {}
+    subParameters.forEach((param) => {
+      if (param.validate?.defaultValue !== undefined) {
+        newItem[param.jsonKey] = param.validate.defaultValue
+      }
+    })
+    const newItems = [...items, newItem]
+    setItems(newItems)
+    onChange?.(newItems)
+    setExpandedItems(new Set([...expandedItems, items.length]))
+  }
+
+  const handleRemove = (index: number) => {
+    const newItems = items.filter((_, i) => i !== index)
+    setItems(newItems)
+    onChange?.(newItems)
+    const newExpanded = new Set<number>()
+    expandedItems.forEach((i) => {
+      if (i < index) newExpanded.add(i)
+      else if (i > index) newExpanded.add(i - 1)
+    })
+    setExpandedItems(newExpanded)
+  }
+
+  const handleChange = (index: number, itemValue: any) => {
+    const newItems = [...items]
+    newItems[index] = itemValue
+    setItems(newItems)
+    onChange?.(newItems)
+  }
+
+  const toggleExpand = (index: number) => {
+    const newExpanded = new Set(expandedItems)
+    if (newExpanded.has(index)) newExpanded.delete(index)
+    else newExpanded.add(index)
+    setExpandedItems(newExpanded)
+  }
+
+  return (
+    <div className="space-y-3">
+      {items.map((item, index) => (
+        <StructItem
+          key={index}
+          index={index}
+          value={item}
+          onChange={(val) => handleChange(index, val)}
+          onRemove={() => handleRemove(index)}
+          subParameters={subParameters}
+          disabled={disabled}
+          isExpanded={expandedItems.has(index)}
+          onToggleExpand={() => toggleExpand(index)}
+        />
+      ))}
+
+      <Button
+        type="button"
+        variant="secondary"
+        onClick={handleAdd}
+        disabled={disabled}
+        className="w-full rounded-none"
+        leftIcon={<Plus className="h-4 w-4" />}
+      >
+        Add {label || "Item"}
+      </Button>
+    </div>
+  )
+}

package/components/ui/tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-md border border-ibm-gray-20 bg-white px-3 py-1.5 text-sm text-ibm-gray-100 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.3.17",
+  "version": "1.4.0",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",