aidos-ui 4.0.0 → 4.0.2

package/src/Providers.tsx

@@ -9,7 +9,7 @@ export function Providers({
   children,
   themes,
 }: {
-  children: JSX.Element;
+  children: React.JSX.Element;
   themes: { light: Theme; dark: Theme };
 }) {
   const [darkModeEnabled, setDarkModeEnabled] = useCookie("dark-mode", {

package/src/RangeInput.tsx

@@ -10,7 +10,7 @@ export interface RangeInputProps extends BaseInputProps {
   onChange?: undefined;
   padding?: Padding;
   gap?: Gap;
-  addOn?: JSX.Element;
+  addOn?: React.JSX.Element;
   addOnPosition?: "start" | "end";
 }
 

package/src/Storage.tsx

@@ -36,7 +36,7 @@ export function createStorage<State>({
 
   const state = { current: initialState };
 
-  function Storage({ children }: { children: ReactNode }): JSX.Element {
+  function Storage({ children }: { children: ReactNode }): React.JSX.Element {
     const emitterRef = useRef(createEmitter<State>());
 
     const subscribe = useCallback((callback: Callback<State>) => {

package/src/TextInput.tsx

@@ -1,10 +1,20 @@
 import React, { ReactNode } from "react";
 import { BaseInput, BaseInputProps } from "./BaseInput";
-import { Row } from "./Row";
-import { Gap, JSS, Padding, cssVar, getPadding } from "./jss";
 import { Column } from "./Column";
+import { Row } from "./Row";
+import { Gap, JSS, Padding, Size, cssVar, getPadding } from "./jss";
+
+const fontSize = {
+  xsmall: cssVar("--font-xsmall"),
+  small: cssVar("--font-small"),
+  medium: cssVar("--font-medium"),
+  large: cssVar("--font-large"),
+  xlarge: cssVar("--font-xlarge"),
+  xxlarge: cssVar("--font-xxlarge"),
+  xxxlarge: cssVar("--font-xxxlarge"),
+};
 
-export interface TextInputProps extends BaseInputProps {
+export interface TextInputProps extends Omit<BaseInputProps, "size"> {
   onValueChange?: (value: string) => void;
   jssRoot?: JSS;
   addOn?: ReactNode;
@@ -13,6 +23,7 @@ export interface TextInputProps extends BaseInputProps {
   onChange?: undefined;
   padding?: Padding;
   bare?: boolean;
+  size?: Size;
 }
 
 export const TextInput = React.forwardRef(
@@ -27,6 +38,7 @@ export const TextInput = React.forwardRef(
       addOnPosition = "start",
       padding = "medium",
       bare,
+      size = "medium",
       ...inputProps
     }: TextInputProps,
     ref?: React.Ref<HTMLInputElement>
@@ -81,8 +93,8 @@ export const TextInput = React.forwardRef(
               color: cssVar("--primary-text"),
               outline: "none",
               border: "none",
-              fontSize: 20,
-              lineHeight: 24 / 20,
+              fontSize: fontSize[size],
+              lineHeight: 1.2,
               "::placeholder": {
                 color: cssVar("--subtle-text"),
               },

package/src/Tooltip.tsx

@@ -10,11 +10,12 @@ const jsss: { [key: string]: JSS } = {
     top: "-100%",
     transform: "translateY(50%)",
     backgroundColor: cssVar("--primary-background"),
-    padding: cssVar("--spacing-s"),
+    padding: `${cssVar("--spacing-s")} ${cssVar("--spacing-m")}`,
     borderRadius: cssVar("--border-radius-m"),
     border: `1px solid ${cssVar("--divider")}`,
-    boxShadow: `0px 1px 2px ${cssVar("--divider")}`,
+    boxShadow: cssVar("--shadow-md"),
     overflow: "hidden",
+    animation: "popoverFadeIn 0.15s ease-out",
   },
 };
 
@@ -23,11 +24,11 @@ interface TooltipProps {
   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 {