aidos-ui 3.0.29 → 3.0.31

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 (

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"),
       }}