aidos-ui 3.0.29 → 3.0.31

package/src/Link.tsx

@@ -39,7 +39,7 @@ export const Link = React.forwardRef(
       align = "center",
       gap = "small",
       justify = "center",
-      jsStyle,
+      jss,
       size = "medium",
       padding = "medium",
       inline = true,
@@ -56,7 +56,7 @@ export const Link = React.forwardRef(
         color={color}
         disabled={disabled}
         padding={padding}
-        jsStyle={[
+        jss={[
           {
             borderRadius: cssVar("--border-radius-m"),
             justifyContent: "center",
@@ -70,11 +70,11 @@ export const Link = React.forwardRef(
             textUnderlineOffset: "2px",
             textDecorationColor: getCSSColor(color, disabled, bare),
           },
-          jsStyle,
+          jss,
         ]}
       >
         <Row
-          jsStyle={{
+          jss={{
             display: inline ? "inline-flex" : "flex",
           }}
           grow={true}

package/src/List.tsx

@@ -16,7 +16,7 @@ const ListContext = React.createContext({ bare: false, carded: true });
 
 export function List({
   ariaLabel,
-  jsStyle,
+  jss,
   autofocus = false,
   navigation = true,
   bare,
@@ -32,7 +32,7 @@ export function List({
         role="grid"
         aria-label={ariaLabel}
         ref={rootRef}
-        jsStyle={[
+        jss={[
           { overflow: "hidden" },
           !bare && {
             backgroundColor: cssVar("--overlay-background"),
@@ -47,7 +47,7 @@ export function List({
               border: `1px solid ${cssVar("--divider")}`,
               borderRadius: cssVar("--border-radius-l"),
             },
-          jsStyle,
+          jss,
         ]}
         {...otherProps}
       />

package/src/ListButtonItem.tsx

@@ -27,7 +27,7 @@ export const ListButtonItem = React.forwardRef(
       color = "primary",
       disabled = false,
       padding = "medium",
-      jsStyle,
+      jss,
       gap,
       selected,
       ...otherProps
@@ -47,7 +47,7 @@ export const ListButtonItem = React.forwardRef(
         selected={selected}
         aria-selected={selected}
         {...otherProps}
-        jsStyle={jsStyle}
+        jss={jss}
       >
         {({ content }) => (
           <BaseButton
@@ -57,7 +57,7 @@ export const ListButtonItem = React.forwardRef(
             bare={true}
             color={bare ? "primary" : color}
             ref={ref}
-            jsStyle={getInteractableListItemJSStyles({ bare, selected })}
+            jss={getInteractableListItemJSStyles({ bare, selected })}
             onClick={onClick}
           >
             {content}

package/src/ListDivider.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { BaseView } from "./BaseView";
 
-const jsStyles = {
+const jsss = {
   root: {
     width: "100%",
     borderBottom: "1px solid var(--divider)",
@@ -9,5 +9,5 @@ const jsStyles = {
 };
 
 export function ListDivider() {
-  return <BaseView jsStyle={jsStyles.root} />;
+  return <BaseView jss={jsss.root} />;
 }

package/src/ListHeaderItem.tsx

@@ -29,7 +29,7 @@ export function ListHeaderItem({
       addOn={addOn}
       addOnPosition={addOnPosition}
       withDivider={bare ? false : withDivider}
-      jsStyle={
+      jss={
         bare
           ? null
           : {

package/src/ListItem.tsx

@@ -16,12 +16,7 @@ export const ListItem = React.forwardRef(
     const { bare } = useListContext();
 
     return (
-      <BaseListItem
-        withDivider={!bare}
-        {...props}
-        jsStyle={props.jsStyle}
-        ref={ref}
-      >
+      <BaseListItem withDivider={!bare} {...props} jss={props.jss} ref={ref}>
         {({ content }) => content}
       </BaseListItem>
     );

package/src/ListLinkItem.tsx

@@ -29,7 +29,7 @@ export const ListLinkItem = React.forwardRef(
       href,
       disabled = false,
       padding = "medium",
-      jsStyle,
+      jss,
       gap,
       selected,
       color = "primary",
@@ -51,7 +51,7 @@ export const ListLinkItem = React.forwardRef(
         bodyColor={getGlyphColor(color, disabled, true)}
         selected={selected}
         {...otherProps}
-        jsStyle={jsStyle}
+        jss={jss}
       >
         {({ content }) => (
           <BaseLink
@@ -64,7 +64,7 @@ export const ListLinkItem = React.forwardRef(
             color={color}
             href={href}
             ref={ref}
-            jsStyle={getInteractableListItemJSStyles({ bare, selected })}
+            jss={getInteractableListItemJSStyles({ bare, selected })}
             onClick={onClick}
           >
             {content}

package/src/ListSpacer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { BaseView } from "./BaseView";
 
-const jsStyles = {
+const jsss = {
   root: {
     height: "var(--spacing-xl)",
     backgroundColor: "var(--secondary-background)",
@@ -10,5 +10,5 @@ const jsStyles = {
 };
 
 export function ListSpacer() {
-  return <BaseView jsStyle={jsStyles.root} />;
+  return <BaseView jss={jsss.root} />;
 }

package/src/MenuIcon.tsx

@@ -7,7 +7,7 @@ export function MenuIcon({ open, color }: { open: boolean; color: Color }) {
     <Column gap="small">
       <Bar
         color={color}
-        jsStyle={{
+        jss={{
           transform: open ? "rotateZ(135deg)" : "",
           transformOrigin: "center",
           top: open ? 8 : 0,
@@ -15,13 +15,13 @@ export function MenuIcon({ open, color }: { open: boolean; color: Color }) {
       />
       <Bar
         color={color}
-        jsStyle={{
+        jss={{
           opacity: open ? 0 : 1,
         }}
       />
       <Bar
         color={color}
-        jsStyle={{
+        jss={{
           transform: open ? "rotateZ(-135deg)" : "",
           transformOrigin: "center",
           top: open ? -8 : 0,
@@ -31,10 +31,10 @@ export function MenuIcon({ open, color }: { open: boolean; color: Color }) {
   );
 }
 
-function Bar({ jsStyle, color }: { jsStyle: JSStyle; color: Color }) {
+function Bar({ jss, color }: { jss: JSStyle; color: Color }) {
   return (
     <BaseView
-      jsStyle={[
+      jss={[
         {
           position: "relative",
           width: 24,
@@ -43,7 +43,7 @@ function Bar({ jsStyle, color }: { jsStyle: JSStyle; color: Color }) {
           transition: "all 200ms ease-out",
         },
         getBackground(color),
-        jsStyle,
+        jss,
       ]}
     />
   );

package/src/NextJSRouter.tsx

@@ -7,7 +7,7 @@ import { BaseView } from "./BaseView";
 import { useRouterState } from "./NextJSRouterState";
 import { JSStyle } from "./jss";
 
-const jsStyles: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSStyle } = {
   root: {
     display: "flex",
     flexDirection: "column",
@@ -36,7 +36,7 @@ export function Router() {
   } = useRouterState();
 
   return (
-    <BaseView jsStyle={jsStyles.root}>
+    <BaseView jss={jsss.root}>
       {navigationStack.map(({ route, routeProps }, index, list) => {
         const isTopOfStack = index === list.length - 1;
 
@@ -46,7 +46,7 @@ export function Router() {
             isTopOfStack={isTopOfStack}
           >
             <Column
-              jsStyle={[jsStyles.route, !isTopOfStack && jsStyles.hidden]}
+              jss={[jsss.route, !isTopOfStack && jsss.hidden]}
               aria-hidden={!isTopOfStack}
             >
               <ListDivider />

package/src/Popover.tsx

@@ -3,9 +3,9 @@ import { queryFocusables } from "./aria";
 
 import { BaseView } from "./BaseView";
 import { useRefEffect } from "./useRefEffect";
-import { JSStyle, jss } from "./jss";
+import { JSStyle, toClassnames } from "./jss";
 
-const jsStyles: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSStyle } = {
   popover: {
     padding: 0,
     zIndex: 1,
@@ -77,7 +77,7 @@ export function Popover({ children, close }) {
 
 interface PopoverTriggerProps<Input> {
   PopoverComponent: (props: { close: () => void } & Input) => JSX.Element;
-  jsStyle?: JSStyle;
+  jss?: JSStyle;
   dialogJSStyle?: JSStyle;
   className?: undefined;
   grow?: boolean;
@@ -88,7 +88,7 @@ interface PopoverTriggerProps<Input> {
 
 export function PopoverTrigger<Input>({
   PopoverComponent,
-  jsStyle,
+  jss,
   dialogJSStyle,
   grow,
   shrink,
@@ -120,14 +120,14 @@ export function PopoverTrigger<Input>({
       shrink={shrink}
       tag={tag}
       relative={true}
-      jsStyle={[jsStyle, { position: "relative", display: "inline-block" }]}
+      jss={[jss, { position: "relative", display: "inline-block" }]}
     >
       {children({ toggle })}
       <dialog
         ref={(ref: null | HTMLDialogElement) => {
           dialogRef.current = ref;
         }}
-        className={jss([jsStyles.popover, dialogJSStyle])}
+        className={toClassnames([jsss.popover, dialogJSStyle])}
         onClose={() => {
           setPopover(null);
         }}

package/src/ProgressBar.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { BaseView } from "./BaseView";
 import { Color, Size, JSStyle, getBackground } from "./jss";
 
-const jsStyles: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSStyle } = {
   root: {
     width: "100%",
     display: "flex",
@@ -35,25 +35,25 @@ export function ProgressBar({
   color,
   progress,
   size,
-  jsStyle,
+  jss,
 }: {
   progress: number;
   color: Color;
   size: Size;
-  jsStyle?: JSStyle;
+  jss?: JSStyle;
 }) {
   return (
     <BaseView
-      jsStyle={[
-        jsStyles.root,
+      jss={[
+        jsss.root,
         {
           height: sizes[size],
         },
-        jsStyle,
+        jss,
       ]}
     >
       <BaseView
-        jsStyle={[jsStyles.fill, getBackground(color)]}
+        jss={[jsss.fill, getBackground(color)]}
         style={{
           transform: `scaleX(${progress > 1 ? 1 : progress})`,
         }}

package/src/ProgressCircle.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cssVar, jss } from "./jss";
+import { cssVar, toClassnames } from "./jss";
 
 export function ProgressCircle({
   progress,
@@ -15,7 +15,7 @@ export function ProgressCircle({
 
   return (
     <svg
-      className={jss({
+      className={toClassnames({
         backgroundColor: cssVar("--secondary-background"),
         transform: "rotate(-90deg)",
         borderRadius: "50%",

package/src/RangeInput.tsx

@@ -20,7 +20,7 @@ export const RangeInput = React.forwardRef(
       value,
       onValueChange,
       rootJSStyle,
-      jsStyle,
+      jss,
       gap = "medium",
       padding = "none",
       min = 0,
@@ -38,7 +38,7 @@ export const RangeInput = React.forwardRef(
         gap={gap}
         padding={padding}
         align="center"
-        jsStyle={[
+        jss={[
           {
             ":has(:focus-visible)": {
               borderRadius: cssVar("--border-radius-m"),
@@ -60,7 +60,7 @@ export const RangeInput = React.forwardRef(
           onChange={(e) => {
             onValueChange(parseFloat(e.target.value));
           }}
-          jsStyle={[
+          jss={[
             {
               backgroundColor: cssVar("--primary-background"),
               flexGrow: 1,
@@ -72,7 +72,7 @@ export const RangeInput = React.forwardRef(
                 color: cssVar("--subtle-text"),
               },
             },
-            jsStyle,
+            jss,
           ]}
         />
         {addOnPosition === "end" && addOn}

package/src/RootView.tsx

@@ -39,7 +39,7 @@ export function RootView({
   return (
     <Column
       ref={refCallback}
-      jsStyle={{
+      jss={{
         marginBottom: 0,
         flexGrow: 1,
         flexShrink: 1,

package/src/Select.tsx

@@ -1,30 +1,30 @@
 import { forwardRef } from "react";
-import { JSStyle, cssVar, jss } from "./jss";
+import { JSStyle, cssVar, toClassnames } from "./jss";
 
 export interface SelectProps extends React.HTMLAttributes<HTMLSelectElement> {
   value: string;
   onValueChange: (value: string) => void;
-  jsStyle?: JSStyle;
+  jss?: JSStyle;
   ref?: React.Ref<HTMLSelectElement>;
   className?: undefined;
 }
 
 export const Select = forwardRef(
   (
-    { jsStyle, children, onValueChange, value, ...otherProps }: SelectProps,
+    { jss, children, onValueChange, value, ...otherProps }: SelectProps,
     ref?: React.Ref<HTMLSelectElement>
   ) => {
     return (
       <select
         ref={ref}
-        className={jss([
+        className={toClassnames([
           {
             fontSize: 20,
             border: `1px solid ${cssVar("--divider")}`,
             backgroundColor: cssVar("--overlay-background"),
             borderRadius: cssVar("--border-radius-m"),
           },
-          jsStyle,
+          jss,
         ])}
         value={value}
         onChange={(e) => {

package/src/StaticCheckbox.tsx

@@ -10,7 +10,7 @@ type StaticCheckboxProps = {
   icon?: IconType;
 };
 
-const jsStyles: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSStyle } = {
   border: {
     position: "absolute",
     top: "var(--spacing-xs)",
@@ -51,7 +51,7 @@ export function StaticCheckbox({
 }: StaticCheckboxProps) {
   return (
     <BaseView
-      jsStyle={{
+      jss={{
         position: "relative",
         backgroundColor: cssVar("--primary-background"),
         overflow: "hidden",
@@ -61,11 +61,9 @@ export function StaticCheckbox({
         width: sizes[size],
       }}
     >
-      <BaseView
-        jsStyle={[jsStyles.border, checked && jsStyles.borderChecked]}
-      />
+      <BaseView jss={[jsss.border, checked && jsss.borderChecked]} />
       {checked && (
-        <BaseView jsStyle={jsStyles.icon}>
+        <BaseView jss={jsss.icon}>
           <Icon size={size} color="light" icon={icon} />
         </BaseView>
       )}

package/src/Sublist.tsx

@@ -10,7 +10,7 @@ export function Sublist({
   label,
   labelBold,
   initialState = { collapsed: false },
-  jsStyle,
+  jss,
   secondaryAddOn,
 }: {
   children: React.ReactNode;
@@ -19,7 +19,7 @@ export function Sublist({
   initialState?: {
     collapsed: boolean;
   };
-  jsStyle?: JSStyle;
+  jss?: JSStyle;
   secondaryAddOn?: ReactNode;
 }) {
   const [collapsed, setCollapsed] = React.useState(initialState.collapsed);
@@ -29,13 +29,13 @@ export function Sublist({
         headline={label}
         headlineBold={labelBold}
         onClick={() => setCollapsed((x) => !x)}
-        jsStyle={jsStyle}
+        jss={jss}
         addOn={
           <Row gap="medium" align="center">
             {secondaryAddOn}
             <Box
               padding="medium"
-              jsStyle={[
+              jss={[
                 {
                   transition: "transform 0.15s ease-in",
                 },

package/src/SubmitIconInput.tsx

@@ -14,7 +14,7 @@ export function SubmitIconInput({ icon, ...otherProps }: SubmitIconInputProps) {
     <BaseInput
       label={
         <Box
-          jsStyle={{
+          jss={{
             cursor: "pointer",
             display: "flex",
             justifyContent: "center",
@@ -36,7 +36,7 @@ export function SubmitIconInput({ icon, ...otherProps }: SubmitIconInputProps) {
       }
       {...otherProps}
       type="submit"
-      jsStyle={{
+      jss={{
         visibility: "hidden",
       }}
       value=""

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;
@@ -20,7 +21,8 @@ export interface TabsProps extends RowProps {
   labelSize?: Size;
   bare?: boolean;
   tabPadding?: Padding;
-  tabJSStyle?: JSStyle;
+  tabJSStyle?: JSStyle | ((data: { selected: boolean }) => 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,56 @@ 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),
+                typeof tabJSStyle === "function"
+                  ? tabJSStyle({ selected })
+                  : tabJSStyle,
+              ]}
+            >
+              {addOnPosition === "start" && addOn}
+              <Text size={labelSize} color={selected ? "primary" : "secondary"}>
+                {labelRenderer ? labelRenderer(label) : label}
+              </Text>
+              {addOnPosition === "end" && addOn}
+            </BaseComponent>
+          );
+        }
       )}
     </Row>
   );