aidos-ui 3.0.31 → 4.0.1

package/src/Tooltip.tsx

@@ -3,9 +3,9 @@ import React, { useRef, useState } from "react";
 import { BaseView } from "./BaseView";
 import { useRefEffect } from "./useRefEffect";
 import { Text } from "./Text";
-import { JSStyle, cssVar, toClassnames } from "./jss";
+import { JSS, cssVar, toClassnames } from "./jss";
 
-const jsss: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSS } = {
   tooltip: {
     top: "-100%",
     transform: "translateY(50%)",
@@ -20,14 +20,14 @@ const jsss: { [key: string]: JSStyle } = {
 
 interface TooltipProps {
   content: string;
-  jss?: JSStyle;
+  jss?: JSS;
   className?: undefined;
   tag?: keyof HTMLElementTagNameMap;
-  children: JSX.Element;
+  children: React.JSX.Element;
 }
 
 export function Tooltip({ content, jss, tag, children }: TooltipProps) {
-  const [tooltip, setTooltip] = useState<JSX.Element>(null);
+  const [tooltip, setTooltip] = useState<React.JSX.Element>(null);
   const dialogRef = useRef(null);
   const focusTrapRoot = useRefEffect((root: HTMLDialogElement) => {
     dialogRef.current = root;

package/src/docs/mdx.tsx

@@ -83,6 +83,46 @@ const components: any = {
       {children}
     </span>
   ),
+  table: (props) => (
+    <table
+      style={{
+        width: "100%",
+        borderCollapse: "collapse",
+        marginBottom: cssVar("--spacing-l"),
+        fontSize: 14,
+      }}
+      {...props}
+    />
+  ),
+  thead: (props) => (
+    <thead
+      style={{
+        borderBottom: `2px solid ${cssVar("--divider")}`,
+      }}
+      {...props}
+    />
+  ),
+  th: (props) => (
+    <th
+      style={{
+        textAlign: "left",
+        padding: cssVar("--spacing-s"),
+        color: cssVar("--primary-text"),
+        fontWeight: "bold",
+      }}
+      {...props}
+    />
+  ),
+  td: (props) => (
+    <td
+      style={{
+        padding: cssVar("--spacing-s"),
+        borderBottom: `1px solid ${cssVar("--divider")}`,
+        color: cssVar("--secondary-text"),
+      }}
+      {...props}
+    />
+  ),
 };
 
 export function labelToID(string: string): string {