aidos-ui 3.0.28 → 3.0.30

package/src/Tabs.tsx

@@ -4,6 +4,7 @@ import { JSStyle, Padding, Size, cssVar, getPadding } from "./jss";
 import { useNavigation } from "./useNavigation";
 import { Text } from "./Text";
 import { ReactNode } from "react";
+import { BaseButton } from "./BaseButton";
 
 export type Tab = {
   label: string;
@@ -21,6 +22,7 @@ export interface TabsProps extends RowProps {
   bare?: boolean;
   tabPadding?: Padding;
   tabJSStyle?: JSStyle;
+  labelRenderer?: (label: string) => ReactNode;
 }
 
 export function Tabs({
@@ -29,8 +31,9 @@ export function Tabs({
   padding = "none",
   tabPadding = "medium",
   labelSize = "large",
-  jsStyle,
+  jss,
   tabJSStyle,
+  labelRenderer,
   ["aria-controls"]: ariaControls,
   ...otherProps
 }: TabsProps) {
@@ -39,7 +42,7 @@ export function Tabs({
   return (
     <Row
       role="tablist"
-      jsStyle={jsStyle}
+      jss={jss}
       gap={gap}
       padding={padding}
       ref={root}
@@ -53,50 +56,54 @@ export function Tabs({
           selected,
           addOn,
           addOnPosition = "start",
-        }) => (
-          <BaseLink
-            aria-controls={ariaControls}
-            role="tab"
-            aria-selected={selected ? "true" : undefined}
-            key={label}
-            bare
-            color={selected ? "positive" : "primary"}
-            href={href}
-            onClick={onClick}
-            animateInteraction={false}
-            jsStyle={[
-              {
-                textDecoration: "none",
-                borderBottom: selected
-                  ? `3px solid ${cssVar("--highlight")}`
-                  : `3px solid transparent`,
-                ":active span": {
-                  transform: "scale(0.97)",
-                },
-                ":first-child": {
-                  borderTopLeftRadius: cssVar("--border-radius-m"),
-                },
-                ":last-child": {
-                  borderTopRightRadius: cssVar("--border-radius-m"),
-                },
-                ":hover": {
-                  backgroundColor: cssVar("--hovered-background"),
-                },
-                ":active:hover": {
-                  backgroundColor: cssVar("--pressed-background"),
+        }) => {
+          const BaseComponent = href != null ? BaseLink : BaseButton;
+
+          return (
+            <BaseComponent
+              aria-controls={ariaControls}
+              role="tab"
+              aria-selected={selected ? "true" : undefined}
+              key={label}
+              bare
+              color={selected ? "positive" : "primary"}
+              href={href}
+              onClick={onClick}
+              animateInteraction={false}
+              jss={[
+                {
+                  textDecoration: "none",
+                  borderBottom: selected
+                    ? `3px solid ${cssVar("--highlight")}`
+                    : `3px solid transparent`,
+                  ":active span": {
+                    transform: "scale(0.97)",
+                  },
+                  ":first-child": {
+                    borderTopLeftRadius: cssVar("--border-radius-m"),
+                  },
+                  ":last-child": {
+                    borderTopRightRadius: cssVar("--border-radius-m"),
+                  },
+                  ":hover": {
+                    backgroundColor: cssVar("--hovered-background"),
+                  },
+                  ":active:hover": {
+                    backgroundColor: cssVar("--pressed-background"),
+                  },
                 },
-              },
-              getPadding(tabPadding),
-              tabJSStyle,
-            ]}
-          >
-            {addOnPosition === "start" && addOn}
-            <Text size={labelSize} color={selected ? "primary" : "secondary"}>
-              {label}
-            </Text>
-            {addOnPosition === "end" && addOn}
-          </BaseLink>
-        )
+                getPadding(tabPadding),
+                tabJSStyle,
+              ]}
+            >
+              {addOnPosition === "start" && addOn}
+              <Text size={labelSize} color={selected ? "primary" : "secondary"}>
+                {labelRenderer ? labelRenderer(label) : label}
+              </Text>
+              {addOnPosition === "end" && addOn}
+            </BaseComponent>
+          );
+        }
       )}
     </Row>
   );

package/src/Text.tsx

@@ -1,5 +1,12 @@
 import React, { ReactNode } from "react";
-import { JSStyle, Size, TextColor, cssVar, getTextColor, jss } from "./jss";
+import {
+  JSStyle,
+  Size,
+  TextColor,
+  cssVar,
+  getTextColor,
+  toClassnames,
+} from "./jss";
 
 const fontSize = {
   xsmall: cssVar("--font-xsmall"),
@@ -22,7 +29,7 @@ export interface TextProps {
   align?: "center" | "none";
   type?: TextType;
   grow?: boolean;
-  jsStyle?: JSStyle;
+  jss?: JSStyle;
   id?: string;
   htmlFor?: string;
 }
@@ -46,7 +53,7 @@ export function Text({
   ellipsis = "default",
   grow,
   type: Type = "span",
-  jsStyle,
+  jss,
   id,
   htmlFor,
 }: TextProps) {
@@ -54,7 +61,7 @@ export function Text({
     ellipsis = Type === "span" || Type === "label";
   }
 
-  const className = jss([
+  const className = toClassnames([
     getTextColor(color),
     { fontSize: fontSize[size], padding: 0, margin: 0 },
     bold && { fontWeight: "bold" },
@@ -65,7 +72,7 @@ export function Text({
       whiteSpace: "nowrap",
     },
     grow && { flexGrow: 1 },
-    jsStyle,
+    jss,
   ]);
 
   return (
@@ -75,30 +82,30 @@ export function Text({
   );
 }
 
-export function Label({ size = "small", type = "label", ...rest }: TextProps) {
+export function Label({ size = "medium", type = "label", ...rest }: TextProps) {
   return <Text size={size} type={type} {...rest} />;
 }
 
-export function Span({ size = "small", type = "span", ...rest }: TextProps) {
+export function Span({ size = "medium", type = "span", ...rest }: TextProps) {
   return <Text size={size} type={type} {...rest} />;
 }
 
-export function P({ size = "small", type = "p", ...rest }: TextProps) {
+export function P({ size = "medium", type = "p", ...rest }: TextProps) {
   return <Text size={size} type={type} {...rest} />;
 }
 
-export function H1({ size = "xlarge", type = "h1", ...rest }: TextProps) {
+export function H1({ size = "xxlarge", type = "h1", ...rest }: TextProps) {
   return <Text size={size} type={type} {...rest} />;
 }
 
-export function H2({ size = "large", type = "h2", ...rest }: TextProps) {
+export function H2({ size = "xlarge", type = "h2", ...rest }: TextProps) {
   return <Text size={size} type={type} {...rest} />;
 }
 
-export function H3({ size = "medium", type = "h3", ...rest }: TextProps) {
+export function H3({ size = "large", type = "h3", ...rest }: TextProps) {
   return <Text size={size} type={type} {...rest} />;
 }
 
-export function Li({ size = "small", type = "li", ...rest }: TextProps) {
+export function Li({ size = "medium", type = "li", ...rest }: TextProps) {
   return <Text size={size} type={type} {...rest} />;
 }

package/src/TextArea.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { JSStyle, Padding, cssVar, getPadding, jss } from "./jss";
+import { JSStyle, Padding, cssVar, getPadding, toClassnames } from "./jss";
 
 export interface TextAreaProps
   extends React.InputHTMLAttributes<HTMLTextAreaElement> {
-  jsStyle?: JSStyle;
+  jss?: JSStyle;
   onValueChange?: (value: string) => void;
   value?: string;
   className?: undefined;
@@ -14,7 +14,7 @@ export interface TextAreaProps
 export const TextArea = React.forwardRef(
   (
     {
-      jsStyle,
+      jss,
       onValueChange,
       value,
       onChange,
@@ -27,7 +27,7 @@ export const TextArea = React.forwardRef(
       <textarea
         {...otherProps}
         ref={ref}
-        className={jss([
+        className={toClassnames([
           {
             flexGrow: 1,
             color: cssVar("--primary-text"),
@@ -46,7 +46,7 @@ export const TextArea = React.forwardRef(
             },
           },
           getPadding(padding),
-          jsStyle,
+          jss,
         ])}
         value={value}
         onChange={

package/src/TextInput.tsx

@@ -21,7 +21,7 @@ export const TextInput = React.forwardRef(
       value,
       onValueChange,
       rootJSStyle,
-      jsStyle,
+      jss,
       addOn,
       gap = "small",
       addOnPosition = "start",
@@ -34,7 +34,7 @@ export const TextInput = React.forwardRef(
     return (
       <Row
         gap={gap}
-        jsStyle={[
+        jss={[
           {
             borderRadius: cssVar("--border-radius-m"),
             overflow: "hidden",
@@ -61,7 +61,7 @@ export const TextInput = React.forwardRef(
           <Column
             justify="center"
             align="center"
-            jsStyle={[getPadding(padding), { paddingRight: 0 }]}
+            jss={[getPadding(padding), { paddingRight: 0 }]}
           >
             {addOn}
           </Column>
@@ -73,7 +73,7 @@ export const TextInput = React.forwardRef(
           onChange={
             onValueChange ? (e) => onValueChange(e.target.value) : undefined
           }
-          jsStyle={[
+          jss={[
             {
               minWidth: 0,
               flexGrow: 1,
@@ -93,14 +93,14 @@ export const TextInput = React.forwardRef(
             getPadding(padding),
             addOn && addOnPosition === "start" ? { paddingLeft: 0 } : null,
             addOn && addOnPosition === "end" ? { paddingRight: 0 } : null,
-            jsStyle,
+            jss,
           ]}
         />
         {addOnPosition === "end" && addOn && (
           <Column
             justify="center"
             align="center"
-            jsStyle={[getPadding(padding), { paddingLeft: 0 }]}
+            jss={[getPadding(padding), { paddingLeft: 0 }]}
           >
             {addOn}
           </Column>

package/src/TextPairing.tsx

@@ -31,7 +31,7 @@ export interface TextPairingProps {
   grow?: boolean;
   shrink?: boolean;
   headlineBold?: boolean;
-  jsStyle?: JSStyle;
+  jss?: JSStyle;
 }
 
 export function TextPairing({
@@ -50,7 +50,7 @@ export function TextPairing({
   shrink,
   headlineBold,
   padding,
-  jsStyle,
+  jss,
 }: TextPairingProps) {
   const textElement = (
     <Column
@@ -58,16 +58,16 @@ export function TextPairing({
       shrink={shrink}
       padding={addOn ? undefined : padding}
       align={align}
-      jsStyle={[
+      jss={[
         {
           overflow: "hidden",
         },
-        jsStyle,
+        jss,
       ]}
     >
       <Row
         align="center"
-        jsStyle={{
+        jss={{
           textAlign: "start",
         }}
       >
@@ -79,7 +79,7 @@ export function TextPairing({
       {body && (
         <Row
           align="center"
-          jsStyle={{
+          jss={{
             marginTop: cssVar("--spacing-xs"),
             textAlign: "start",
           }}
@@ -100,7 +100,7 @@ export function TextPairing({
         gap={gap}
         align="center"
         padding={padding}
-        jsStyle={{
+        jss={{
           overflow: "hidden",
         }}
       >

package/src/TimeInput.tsx

@@ -23,7 +23,7 @@ function TimeInputInternal(
   {
     time: date,
     onTimeChange: onDateChange,
-    jsStyle,
+    jss,
     addOn,
     padding = "small",
     gap = "none",
@@ -38,7 +38,7 @@ function TimeInputInternal(
       padding={padding}
       gap={gap}
       align="center"
-      jsStyle={[
+      jss={[
         {
           borderRadius: cssVar("--border-radius-m"),
           overflow: "hidden",
@@ -79,7 +79,7 @@ function TimeInputInternal(
             )
           );
         }}
-        jsStyle={[
+        jss={[
           {
             flexGrow: 1,
             backgroundColor: "inherit",
@@ -98,7 +98,7 @@ function TimeInputInternal(
               backgroundColor: "none",
             },
           },
-          jsStyle,
+          jss,
         ]}
       />
       {addOnPosition === "end" && addOn}

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, jss } from "./jss";
+import { JSStyle, cssVar, toClassnames } from "./jss";
 
-const jsStyles: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSStyle } = {
   tooltip: {
     top: "-100%",
     transform: "translateY(50%)",
@@ -20,13 +20,13 @@ const jsStyles: { [key: string]: JSStyle } = {
 
 interface TooltipProps {
   content: string;
-  jsStyle?: JSStyle;
+  jss?: JSStyle;
   className?: undefined;
   tag?: keyof HTMLElementTagNameMap;
   children: JSX.Element;
 }
 
-export function Tooltip({ content, jsStyle, tag, children }: TooltipProps) {
+export function Tooltip({ content, jss, tag, children }: TooltipProps) {
   const [tooltip, setTooltip] = useState<JSX.Element>(null);
   const dialogRef = useRef(null);
   const focusTrapRoot = useRefEffect((root: HTMLDialogElement) => {
@@ -66,7 +66,7 @@ export function Tooltip({ content, jsStyle, tag, children }: TooltipProps) {
             dialogRef.current = ref;
             focusTrapRoot(ref);
           }}
-          className={jss(jsStyles.tooltip)}
+          className={toClassnames(jsss.tooltip)}
           onClose={() => {
             setTooltip(null);
           }}
@@ -89,7 +89,7 @@ export function Tooltip({ content, jsStyle, tag, children }: TooltipProps) {
     <BaseView
       tag={tag}
       relative={true}
-      jsStyle={[{ display: "inline-block" }, jsStyle]}
+      jss={[{ display: "inline-block" }, jss]}
       onMouseEnter={() => {
         if (tooltip == null) {
           toggle();

package/src/docs/mdx.tsx

@@ -12,31 +12,29 @@ const monospace = Roboto({ weight: "400", subsets: ["latin"] });
 
 const components: any = {
   h1: (props) => (
-    <H1 jsStyle={{ marginBottom: cssVar("--spacing-xl") }} {...props} />
+    <H1 jss={{ marginBottom: cssVar("--spacing-xl") }} {...props} />
   ),
   h2: (props) => (
     <H2
       id={labelToID(props.children)}
-      jsStyle={{ marginBottom: cssVar("--spacing-l") }}
+      jss={{ marginBottom: cssVar("--spacing-l") }}
       {...props}
     />
   ),
   h3: (props) => {
     return <H3 id={labelToID(props.children)} {...props} />;
   },
-  p: (props) => (
-    <P jsStyle={{ marginBottom: cssVar("--spacing-m") }} {...props} />
-  ),
+  p: (props) => <P jss={{ marginBottom: cssVar("--spacing-m") }} {...props} />,
   span: (props) => <Span {...props} />,
   li: (props) => (
-    <Li jsStyle={{ marginBottom: cssVar("--spacing-s") }} {...props} />
+    <Li jss={{ marginBottom: cssVar("--spacing-s") }} {...props} />
   ),
   a: (props) => {
     return (
       <BaseLink
         bare
         color="positive"
-        jsStyle={{
+        jss={{
           display: "inline-block",
           paddingBottom: cssVar("--spacing-s"),
           paddingTop: cssVar("--spacing-s"),
@@ -49,7 +47,7 @@ const components: any = {
   },
   hr: () => (
     <BaseView
-      jsStyle={{
+      jss={{
         marginBottom: cssVar("--spacing-xxl"),
         marginTop: cssVar("--spacing-xxl"),
       }}