tembro 2.0.5 → 2.1.0

package/packages/cli/vendor/src/components/ui/switch/index.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { Loader2Icon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -9,8 +10,29 @@ export type SwitchProps = Omit<
   checked?: boolean
   defaultChecked?: boolean
   onCheckedChange?: (checked: boolean) => void
+  size?: "sm" | "md" | "lg"
+  loading?: boolean
+  invalid?: boolean
+  label?: React.ReactNode
+  description?: React.ReactNode
+  labelPlacement?: "start" | "end" | "top" | "bottom"
+  switchClassName?: string
+  labelClassName?: string
+  descriptionClassName?: string
 }
 
+const switchSizeClassName = {
+  sm: "h-5 w-9",
+  md: "h-6.5 w-11.5",
+  lg: "h-8 w-14",
+} satisfies Record<NonNullable<SwitchProps["size"]>, string>
+
+const thumbSizeClassName = {
+  sm: "size-4 data-[state=checked]:translate-x-4.5 data-[state=unchecked]:translate-x-0.5",
+  md: "size-5 data-[state=checked]:translate-x-5.5 data-[state=unchecked]:translate-x-0.5",
+  lg: "size-6 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-1",
+} satisfies Record<NonNullable<SwitchProps["size"]>, string>
+
 const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
   (
     {
@@ -18,6 +40,15 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
       checked,
       defaultChecked = false,
       onCheckedChange,
+      size = "md",
+      loading = false,
+      invalid = false,
+      label,
+      description,
+      labelPlacement = "end",
+      switchClassName,
+      labelClassName,
+      descriptionClassName,
       disabled,
       onClick,
       ...props
@@ -27,8 +58,10 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
     const isControlled = checked !== undefined
     const [internalChecked, setInternalChecked] = React.useState(defaultChecked)
     const currentChecked = isControlled ? checked : internalChecked
+    const isDisabled = disabled || loading
 
     const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+      if (isDisabled) return
       const nextChecked = !currentChecked
 
       if (!isControlled) {
@@ -39,18 +72,23 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
       onClick?.(event)
     }
 
-    return (
+    const control = (
       <button
         ref={ref}
         type="button"
         role="switch"
         aria-checked={currentChecked}
+        aria-invalid={invalid || undefined}
+        aria-busy={loading || undefined}
         data-state={currentChecked ? "checked" : "unchecked"}
+        data-size={size}
         data-slot="switch"
-        disabled={disabled}
+        disabled={isDisabled}
         className={cn(
-          "peer inline-flex h-6.5 w-11.5 shrink-0 cursor-pointer items-center rounded-full border border-border/78 bg-input/70 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] transition-[background-color,border-color,box-shadow] outline-none hover:border-ring/30 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary/22 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:border-white/10 dark:bg-white/[0.08]",
-          className
+          "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-border/78 bg-input/70 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] transition-[background-color,border-color,box-shadow] outline-none hover:border-ring/30 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[state=checked]:border-primary/22 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:border-white/10 dark:bg-white/[0.08]",
+          switchSizeClassName[size],
+          switchClassName,
+          !label && className
         )}
         onClick={handleClick}
         {...props}
@@ -59,11 +97,38 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
           data-slot="switch-thumb"
           data-state={currentChecked ? "checked" : "unchecked"}
           className={cn(
-            "pointer-events-none block size-5 rounded-full bg-white shadow-[0_2px_10px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 transition-transform data-[state=checked]:translate-x-5.5 data-[state=unchecked]:translate-x-0.5 dark:bg-[rgba(255,255,255,0.96)]"
+            "pointer-events-none flex items-center justify-center rounded-full bg-white shadow-[0_2px_10px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 transition-transform dark:bg-[rgba(255,255,255,0.96)]",
+            thumbSizeClassName[size]
           )}
-        />
+        >
+          {loading ? <Loader2Icon className="size-3 animate-spin text-muted-foreground" /> : null}
+        </span>
       </button>
     )
+
+    if (!label && !description) return control
+
+    const labelBlock = (
+      <span className="grid min-w-0 gap-0.5">
+        {label ? <span className={cn("text-sm font-medium leading-5 text-foreground", labelClassName)}>{label}</span> : null}
+        {description ? <span className={cn("text-xs leading-5 text-muted-foreground", descriptionClassName)}>{description}</span> : null}
+      </span>
+    )
+
+    return (
+      <label
+        data-slot="switch-field"
+        data-label-placement={labelPlacement}
+        className={cn(
+          "inline-flex min-w-0 gap-3",
+          labelPlacement === "top" || labelPlacement === "bottom" ? "flex-col" : "items-start",
+          labelPlacement === "start" && "flex-row-reverse justify-end",
+          className
+        )}
+      >
+        {labelPlacement === "bottom" ? <>{control}{labelBlock}</> : <>{labelBlock}{control}</>}
+      </label>
+    )
   }
 )
 Switch.displayName = "Switch"

package/packages/cli/vendor/src/components/ui/tabs/index.tsx

@@ -4,8 +4,13 @@ import { Tabs as BaseTabs } from "@base-ui/react/tabs"
 import { cn } from "@/lib/utils"
 
 export type TabsRootProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Root>
-export type TabsListProps = React.ComponentPropsWithoutRef<typeof BaseTabs.List>
-export type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Tab>
+export type TabsListProps = React.ComponentPropsWithoutRef<typeof BaseTabs.List> & {
+  variant?: "default" | "pills" | "underline" | "compact"
+  overflow?: "wrap" | "scroll"
+}
+export type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Tab> & {
+  variant?: "default" | "pills" | "underline" | "compact"
+}
 export type TabsContentProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Panel>
 
 const Tabs = BaseTabs.Root
@@ -13,12 +18,19 @@ const Tabs = BaseTabs.Root
 const TabsList = React.forwardRef<
   React.ElementRef<typeof BaseTabs.List>,
   TabsListProps
->(({ className, ...props }, ref) => (
+>(({ className, variant = "default", overflow = "scroll", ...props }, ref) => (
     <BaseTabs.List
       ref={ref}
       data-slot="tabs-list"
+      data-variant={variant}
+      data-overflow={overflow}
       className={cn(
-        "inline-flex min-h-11 items-center justify-center gap-1 rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:color-mix(in_oklch,var(--border),white_4%)] bg-[color:var(--aui-control-panel-bg,var(--muted))] p-1 text-muted-foreground shadow-[var(--aui-control-panel-shadow,var(--aui-control-shadow,none))] backdrop-blur",
+        "inline-flex max-w-full min-h-11 items-center justify-start gap-1 rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:color-mix(in_oklch,var(--border),white_4%)] bg-[color:var(--aui-control-panel-bg,var(--muted))] p-1 text-muted-foreground shadow-[var(--aui-control-panel-shadow,var(--aui-control-shadow,none))] backdrop-blur",
+        overflow === "scroll" && "overflow-x-auto overflow-y-hidden overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        overflow === "wrap" && "flex-wrap",
+        variant === "underline" && "min-h-10 rounded-none border-x-0 border-t-0 bg-transparent p-0 shadow-none",
+        variant === "compact" && "min-h-9 rounded-[var(--radius-lg)] p-0.5",
+        variant === "pills" && "rounded-full",
         className
       )}
     {...props}
@@ -29,12 +41,16 @@ TabsList.displayName = "TabsList"
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof BaseTabs.Tab>,
   TabsTriggerProps
->(({ className, ...props }, ref) => (
+>(({ className, variant = "default", ...props }, ref) => (
     <BaseTabs.Tab
       ref={ref}
       data-slot="tabs-trigger"
+      data-variant={variant}
       className={cn(
-        "inline-flex min-h-9 items-center justify-center whitespace-nowrap rounded-[var(--radius-md)] border border-transparent px-3.5 py-1.5 text-sm font-medium text-muted-foreground ring-offset-background transition-[background-color,color,box-shadow,border-color] hover:bg-[color:color-mix(in_oklch,var(--background),transparent_18%)] hover:text-foreground data-[selected]:border-[color:color-mix(in_oklch,var(--border),var(--foreground)_8%)] data-[selected]:bg-[color:var(--aui-control-surface,var(--background))] data-[selected]:text-foreground data-[selected]:shadow-[var(--aui-control-shadow,none)] aria-selected:border-[color:color-mix(in_oklch,var(--border),var(--foreground)_8%)] aria-selected:bg-[color:var(--aui-control-surface,var(--background))] aria-selected:text-foreground aria-selected:shadow-[var(--aui-control-shadow,none)] focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] disabled:pointer-events-none disabled:opacity-50",
+        "inline-flex min-h-9 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] border border-transparent px-3.5 py-1.5 text-sm font-medium text-muted-foreground ring-offset-background transition-[background-color,color,box-shadow,border-color] hover:bg-[color:color-mix(in_oklch,var(--background),transparent_18%)] hover:text-foreground data-[selected]:border-[color:color-mix(in_oklch,var(--border),var(--foreground)_8%)] data-[selected]:bg-[color:var(--aui-control-surface,var(--background))] data-[selected]:text-foreground data-[selected]:shadow-[var(--aui-control-shadow,none)] aria-selected:border-[color:color-mix(in_oklch,var(--border),var(--foreground)_8%)] aria-selected:bg-[color:var(--aui-control-surface,var(--background))] aria-selected:text-foreground aria-selected:shadow-[var(--aui-control-shadow,none)] focus-visible:outline-none focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+        variant === "underline" && "min-h-10 rounded-none border-b-2 px-2 shadow-none data-[selected]:border-b-primary data-[selected]:bg-transparent data-[selected]:shadow-none aria-selected:border-b-primary aria-selected:bg-transparent aria-selected:shadow-none",
+        variant === "pills" && "rounded-full",
+        variant === "compact" && "min-h-8 px-2.5 text-xs",
         className
       )}
     {...props}

package/packages/cli/vendor/src/components/ui/textarea/index.tsx

@@ -2,19 +2,109 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export type TextareaProps = React.ComponentProps<"textarea">
-
-function Textarea({ className, ...props }: TextareaProps) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "flex field-sizing-content min-h-28 w-full rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] px-4 py-3.5 text-sm font-medium text-foreground shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none placeholder:text-muted-foreground/78 hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[0_0_0_1px_color-mix(in_oklch,var(--destructive),transparent_32%)] read-only:bg-[color:var(--aui-control-surface-readonly,var(--muted))]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
+export type TextareaProps = React.ComponentProps<"textarea"> & {
+  onValueChange?: (value: string) => void
+  helperText?: React.ReactNode
+  errorText?: React.ReactNode
+  showCharacterCount?: boolean
+  countFormatter?: (currentLength: number, maxLength?: number) => React.ReactNode
+  wrapperClassName?: string
+  textareaClassName?: string
+}
+
+function getTextareaLength(value: TextareaProps["value"] | TextareaProps["defaultValue"]) {
+  if (typeof value === "string") return value.length
+  if (typeof value === "number") return String(value).length
+  if (Array.isArray(value)) return value.join("").length
+  return 0
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      className,
+      value,
+      defaultValue,
+      onChange,
+      onValueChange,
+      helperText,
+      errorText,
+      showCharacterCount = false,
+      countFormatter,
+      wrapperClassName,
+      textareaClassName,
+      maxLength,
+      "aria-invalid": ariaInvalid,
+      ...props
+    },
+    ref
+  ) => {
+    const isControlled = value !== undefined
+    const [uncontrolledLength, setUncontrolledLength] = React.useState(() => getTextareaLength(defaultValue))
+    const currentLength = isControlled ? getTextareaLength(value) : uncontrolledLength
+    const helperMessage = errorText ?? helperText
+    const invalid = Boolean(errorText) || ariaInvalid === true || ariaInvalid === "true"
+
+    const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+      if (!isControlled) {
+        setUncontrolledLength(event.target.value.length)
+      }
+      onChange?.(event)
+      onValueChange?.(event.target.value)
+    }
+
+    const textarea = (
+      <textarea
+        data-slot="textarea"
+        value={value}
+        defaultValue={isControlled ? undefined : defaultValue}
+        maxLength={maxLength}
+        aria-invalid={invalid || undefined}
+        className={cn(
+          "flex field-sizing-content min-h-28 w-full rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] px-4 py-3.5 text-sm font-medium text-foreground shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none placeholder:text-muted-foreground/78 hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[0_0_0_1px_color-mix(in_oklch,var(--destructive),transparent_32%)] read-only:bg-[color:var(--aui-control-surface-readonly,var(--muted))]",
+          textareaClassName,
+          className
+        )}
+        onChange={handleChange}
+        ref={ref}
+        {...props}
+      />
+    )
+
+    if (!helperMessage && !showCharacterCount) {
+      return textarea
+    }
+
+    return (
+      <div data-slot="textarea-field" className={cn("grid gap-1.5", wrapperClassName)}>
+        {textarea}
+        <div data-slot="textarea-meta" className="flex items-start justify-between gap-3 px-1">
+          <div
+            data-slot="textarea-helper"
+            className={cn(
+              "min-w-0 text-xs leading-5",
+              errorText ? "text-destructive" : "text-muted-foreground"
+            )}
+          >
+            {helperMessage}
+          </div>
+          {showCharacterCount ? (
+            <div
+              data-slot="textarea-count"
+              className={cn(
+                "shrink-0 text-[11px] font-medium tabular-nums",
+                errorText ? "text-destructive" : "text-muted-foreground"
+              )}
+            >
+              {countFormatter?.(currentLength, maxLength) ??
+                (typeof maxLength === "number" ? `${currentLength}/${maxLength}` : currentLength)}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
 export { Textarea }

package/packages/cli/vendor/src/components/ui/textarea.tsx

@@ -0,0 +1,2 @@
+export * from "./textarea/index"
+

package/packages/cli/vendor/src/components/ui/tooltip/index.tsx

@@ -1,37 +1,82 @@
 import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
 
 import { cn } from "@/lib/utils"
 
-export type TooltipProps = Omit<React.ComponentProps<"span">, "content"> & {
+export type TooltipProps = Omit<TooltipPrimitive.Root.Props, "children"> &
+  Omit<React.ComponentProps<"span">, "content" | "children"> & {
   content: React.ReactNode
-  side?: "top" | "bottom" | "left" | "right"
+  children: React.ReactNode
+  side?: TooltipPrimitive.Positioner.Props["side"]
+  align?: TooltipPrimitive.Positioner.Props["align"]
+  sideOffset?: TooltipPrimitive.Positioner.Props["sideOffset"]
+  alignOffset?: TooltipPrimitive.Positioner.Props["alignOffset"]
+  collisionPadding?: TooltipPrimitive.Positioner.Props["collisionPadding"]
+  delay?: TooltipPrimitive.Trigger.Props["delay"]
+  closeDelay?: TooltipPrimitive.Trigger.Props["closeDelay"]
   disabled?: boolean
 }
 
-const sideClassName = {
-  top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
-  bottom: "left-1/2 top-full mt-2 -translate-x-1/2",
-  left: "right-full top-1/2 mr-2 -translate-y-1/2",
-  right: "left-full top-1/2 ml-2 -translate-y-1/2",
+function getPlainText(node: React.ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") return String(node)
+  if (Array.isArray(node)) return node.map(getPlainText).join("")
+  if (React.isValidElement<{ children?: React.ReactNode }>(node)) return getPlainText(node.props.children)
+  return ""
 }
 
-function Tooltip({ content, side = "top", disabled = false, className, children, ...props }: TooltipProps) {
+function Tooltip({
+  content,
+  side = "top",
+  align = "center",
+  sideOffset = 8,
+  alignOffset = 0,
+  collisionPadding = 8,
+  delay = 500,
+  closeDelay = 0,
+  disabled = false,
+  className,
+  children,
+  ...props
+}: TooltipProps) {
+  const trigger = React.isValidElement(children) ? (
+    children
+  ) : (
+    <span className="inline-flex">{children}</span>
+  )
+  const contentText = getPlainText(content)
+  const shouldRenderFallbackLabel =
+    !disabled && contentText.length > 0 && !getPlainText(children).includes(contentText)
+
   return (
-    <span data-slot="tooltip" className={cn("group/tooltip relative inline-flex", className)} {...props}>
-      {children}
-      {!disabled && (
-        <span
-          data-slot="tooltip-content"
-          role="tooltip"
-          className={cn(
-            "pointer-events-none absolute z-50 hidden max-w-64 whitespace-nowrap rounded-xl border border-border/75 bg-popover/98 px-2.5 py-1.5 text-[11px] font-medium text-popover-foreground shadow-[0_16px_42px_color-mix(in_oklch,var(--foreground),transparent_86%)] backdrop-blur group-hover/tooltip:block group-focus-within/tooltip:block",
-            sideClassName[side]
-          )}
+    <TooltipPrimitive.Root disabled={disabled}>
+      <TooltipPrimitive.Trigger
+        data-slot="tooltip-trigger"
+        delay={delay}
+        closeDelay={closeDelay}
+        disabled={disabled}
+        render={<span data-slot="tooltip" className={cn("inline-flex", className)} {...props} />}
+      >
+        {trigger}
+        {shouldRenderFallbackLabel ? <span className="sr-only">{content}</span> : null}
+      </TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Positioner
+          className="isolate z-50"
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+          alignOffset={alignOffset}
+          collisionPadding={collisionPadding}
         >
-          {content}
-        </span>
-      )}
-    </span>
+          <TooltipPrimitive.Popup
+            data-slot="tooltip-content"
+            className="z-50 max-w-64 origin-(--transform-origin) rounded-[var(--radius-lg)] border border-border/75 bg-popover/98 px-2.5 py-1.5 text-[11px] font-medium leading-4 text-popover-foreground shadow-[0_16px_42px_color-mix(in_oklch,var(--foreground),transparent_86%)] outline-hidden backdrop-blur duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95"
+          >
+            {content}
+          </TooltipPrimitive.Popup>
+        </TooltipPrimitive.Positioner>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
   )
 }