aidos-ui 3.0.29 → 3.0.31

package/src/BaseLink.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from "react";
 import { InteractableColor, getInteractableJSStyles } from "./Interactable";
-import { JSStyle, Padding, jss } from "./jss";
+import { JSStyle, Padding, toClassnames } from "./jss";
 
 export interface BaseLinkProps
   extends React.LinkHTMLAttributes<HTMLAnchorElement> {
   onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
   target?: string;
-  jsStyle?: JSStyle;
+  jss?: JSStyle;
   color: InteractableColor;
   href: string;
   disabled?: boolean;
@@ -27,7 +27,7 @@ export const BaseLink = React.forwardRef(
     {
       onClick,
       children,
-      jsStyle,
+      jss,
       color,
       bare = false,
       disabled,
@@ -60,7 +60,7 @@ export const BaseLink = React.forwardRef(
               }
             : undefined
         }
-        className={jss([
+        className={toClassnames([
           ...getInteractableJSStyles({
             color,
             border,
@@ -70,7 +70,7 @@ export const BaseLink = React.forwardRef(
             padding,
           }),
           disabled && { pointerEvents: "none" },
-          jsStyle,
+          jss,
         ])}
       >
         {children}

package/src/BaseList.tsx

@@ -6,21 +6,18 @@ export interface BaseListProps extends ColumnProps {
 }
 
 export const BaseList = React.forwardRef(
-  (
-    { jsStyle, ...otherProps }: BaseListProps,
-    ref?: React.Ref<HTMLDivElement>
-  ) => {
+  ({ jss, ...otherProps }: BaseListProps, ref?: React.Ref<HTMLDivElement>) => {
     return (
       <Column
         {...otherProps}
         tag="ul"
-        jsStyle={[
+        jss={[
           {
             listStyle: "none",
             margin: 0,
             padding: 0,
           },
-          jsStyle,
+          jss,
         ]}
         ref={ref}
       />

package/src/BaseListItem.tsx

@@ -11,7 +11,7 @@ import { useListContext } from "./List";
 // @ts-ignore
 export interface BaseListItemProps extends RowProps {
   children: (elements: { content: JSX.Element }) => ReactNode;
-  jsStyle?: JSStyle;
+  jss?: JSStyle;
   withDivider?: boolean;
   headline: string;
   headlineSize?: Size;
@@ -34,7 +34,7 @@ export const BaseListItem = React.forwardRef(
   (
     {
       children,
-      jsStyle,
+      jss,
       withDivider = true,
       headline,
       headlineSize = "medium",
@@ -86,7 +86,7 @@ export const BaseListItem = React.forwardRef(
           relative
           tag="li"
           role="row"
-          jsStyle={[
+          jss={[
             !bare &&
               carded && {
                 [":first-child *"]: {
@@ -98,13 +98,13 @@ export const BaseListItem = React.forwardRef(
                   borderBottomRightRadius: cssVar("--border-radius-l"),
                 },
               },
-            jsStyle,
+            jss,
           ]}
         >
           <Row
             grow
             role="gridcell"
-            jsStyle={{
+            jss={{
               overflow: "hidden",
             }}
           >

package/src/BaseView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { JSStyle, jss } from "./jss";
+import { JSStyle, toClassnames } from "./jss";
 
-const jsStyles: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSStyle } = {
   relative: {
     position: "relative",
   },
@@ -14,7 +14,7 @@ const jsStyles: { [key: string]: JSStyle } = {
 };
 
 export interface BaseViewProps extends React.HTMLAttributes<HTMLElement> {
-  jsStyle?: JSStyle;
+  jss?: JSStyle;
   ref?: React.Ref<HTMLDivElement>;
   className?: undefined;
   grow?: boolean;
@@ -26,7 +26,7 @@ export interface BaseViewProps extends React.HTMLAttributes<HTMLElement> {
 export const BaseView = React.forwardRef(
   (
     {
-      jsStyle,
+      jss,
       children,
       tag,
       grow,
@@ -42,11 +42,11 @@ export const BaseView = React.forwardRef(
       // @ts-ignore
       <Tag
         ref={ref}
-        className={jss([
-          jsStyle,
-          grow && jsStyles.grow,
-          shrink && jsStyles.shrink,
-          relative && jsStyles.relative,
+        className={toClassnames([
+          jss,
+          grow && jsss.grow,
+          shrink && jsss.shrink,
+          relative && jsss.relative,
         ])}
         {...otherProps}
       >

package/src/Button.tsx

@@ -36,7 +36,7 @@ export const Button = React.forwardRef(
       align = "center",
       gap = "small",
       justify = "center",
-      jsStyle,
+      jss,
       size = "medium",
       bold,
       padding = "medium",
@@ -52,13 +52,13 @@ export const Button = React.forwardRef(
         color={color}
         disabled={disabled}
         padding={padding}
-        jsStyle={[
+        jss={[
           {
             borderRadius: cssVar("--border-radius-m"),
             justifyContent: "center",
             userSelect: "none",
           },
-          jsStyle,
+          jss,
         ]}
       >
         <Row grow={true} align={align} gap={gap} justify={justify}>

package/src/Calendar.tsx

@@ -20,11 +20,11 @@ export const Calendar = React.forwardRef(
       date,
       cell,
       header,
-      jsStyle,
+      jss,
     }: {
       date: Date;
       header: (props: { weekday: string }) => JSX.Element;
-      jsStyle?: JSStyle;
+      jss?: JSStyle;
       cell: (props: {
         today?: boolean;
         date: Date;
@@ -61,13 +61,13 @@ export const Calendar = React.forwardRef(
     return (
       <BaseView
         ref={ref}
-        jsStyle={[
+        jss={[
           {
             display: "grid",
             gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr",
             gridTemplateRows: "1fr",
           },
-          jsStyle,
+          jss,
         ]}
       >
         {headers}

package/src/Card.tsx

@@ -5,7 +5,7 @@ export interface CardProps extends FlexLayoutProps {}
 
 export function Card({
   children,
-  jsStyle,
+  jss,
   padding = "large",
   gap = "large",
   ...otherProps
@@ -15,13 +15,13 @@ export function Card({
       {...otherProps}
       padding={padding}
       gap={gap}
-      jsStyle={[
+      jss={[
         {
           backgroundColor: cssVar("--overlay-background"),
           borderRadius: cssVar("--border-radius-l"),
           boxShadow: "1px 1px 4px 1px #e0e0e0",
         },
-        jsStyle,
+        jss,
       ]}
     >
       {children}

package/src/Checkbox.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { BaseInput, BaseInputProps } from "./BaseInput";
 import {} from "./BaseView";
-import { Size, jss } from "./jss";
+import { Size, toClassnames } from "./jss";
 import { StaticCheckbox, sizes } from "./StaticCheckbox";
 
 // @ts-ignore
@@ -21,7 +21,7 @@ export function Checkbox({
 }: CheckboxProps) {
   return (
     <label
-      className={jss({
+      className={toClassnames({
         position: "relative",
         display: "flex",
         justifyContent: "center",
@@ -46,7 +46,7 @@ export function Checkbox({
         tabIndex={0}
         checked={checked}
         onChange={onClick}
-        jsStyle={{
+        jss={{
           position: "absolute",
           opacity: 0,
           cursor: "pointer",

package/src/Circle.tsx

@@ -4,19 +4,19 @@ import { Box, BoxProps } from "./Box";
 interface CircleProps extends BoxProps {}
 
 export function Circle({
-  jsStyle,
+  jss,
   padding = "medium",
   ...otherProps
 }: CircleProps) {
   return (
     <Box
       padding={padding}
-      jsStyle={[
+      jss={[
         {
           borderRadius: "50%",
           overflow: "hidden",
         },
-        jsStyle,
+        jss,
       ]}
       {...otherProps}
     />

package/src/DarkMode.tsx

@@ -84,7 +84,7 @@ export function DarkModeToggle() {
   }, []);
 
   if (!show) {
-    return <BaseView jsStyle={{ width: 32, height: 32 }} />;
+    return <BaseView jss={{ width: 32, height: 32 }} />;
   }
 
   return (

package/src/DateInput.tsx

@@ -12,17 +12,17 @@ export interface DateInputProps extends BaseInputProps {
   icon?: IconType;
   addOn?: ReactNode;
   onChange?: undefined;
-  jsStyles?: JSStyle;
+  jsss?: JSStyle;
 }
 
 export const DateInput = React.forwardRef(
   (
-    { date, onDateChange, jsStyle, icon, addOn, ...inputProps }: DateInputProps,
+    { date, onDateChange, jss, icon, addOn, ...inputProps }: DateInputProps,
     ref?: React.Ref<HTMLInputElement>
   ) => {
     return (
       <Row
-        jsStyle={{
+        jss={{
           backgroundColor: "inherit",
         }}
       >
@@ -37,7 +37,7 @@ export const DateInput = React.forwardRef(
           ref={ref}
           value={date.toISOString().substring(0, 10)}
           onChange={(e) => onDateChange(new Date(e.target.value))}
-          jsStyle={[
+          jss={[
             {
               flexGrow: 1,
               backgroundColor: "inherit",
@@ -53,7 +53,7 @@ export const DateInput = React.forwardRef(
                 color: "var(--subtle-text);",
               },
             },
-            jsStyle,
+            jss,
           ]}
         />
         {addOn}

package/src/DatePicker.tsx

@@ -1,8 +1,8 @@
 import React, { useRef } from "react";
 import { Text } from "./Text";
-import { TextColor, jss } from "./jss";
+import { TextColor, toClassnames } from "./jss";
 
-const jsStyles = {
+const jsss = {
   dateInput: {
     border: "1px solid var(--divider)",
     backgroundColor: "var(--primary-background)",
@@ -47,7 +47,7 @@ export function DatePicker({
       <input
         min={min}
         max={max}
-        className={jss(jsStyles.dateInput)}
+        className={toClassnames(jsss.dateInput)}
         type="date"
         id={id}
         value={date.toISOString().substring(0, 10)}

package/src/DatetimeInput.tsx

@@ -12,10 +12,10 @@ export interface DatetimeInputProps extends BaseInputProps {
   icon?: IconType;
   addOn?: ReactNode;
   onChange?: undefined;
-  jsStyle?: JSStyle;
+  jss?: JSStyle;
 }
 
-const jsStyles = {
+const jsss = {
   root: {
     backgroundColor: "var(--primary-background)",
   },
@@ -39,18 +39,11 @@ const jsStyles = {
 
 export const DatetimeInput = React.forwardRef(
   (
-    {
-      date,
-      onDateChange,
-      jsStyle,
-      icon,
-      addOn,
-      ...inputProps
-    }: DatetimeInputProps,
+    { date, onDateChange, jss, icon, addOn, ...inputProps }: DatetimeInputProps,
     ref?: React.Ref<HTMLInputElement>
   ) => {
     return (
-      <Row jsStyle={jsStyles.root}>
+      <Row jss={jsss.root}>
         {icon && (
           <Box padding="medium">
             <Icon size="medium" color="secondary" icon={icon} />
@@ -62,7 +55,7 @@ export const DatetimeInput = React.forwardRef(
           ref={ref}
           value={date.toISOString().substring(0, 16)}
           onChange={(e) => onDateChange(new Date(e.target.value))}
-          jsStyle={[jsStyles.input, jsStyle]}
+          jss={[jsss.input, jss]}
         />
         {addOn}
       </Row>

package/src/DesignBook.tsx

@@ -658,7 +658,7 @@ export function DesignBook() {
               <Box relative={true} style={{ opacity: outOfMonth ? 0.2 : 1 }}>
                 {today && (
                   <Badge
-                    jsStyle={{
+                    jss={{
                       position: "absolute",
                       top: "50%",
                       transform: "translateY(-50%) translateX(-75%)",

package/src/Dialog.tsx

@@ -6,9 +6,9 @@ import { ListDivider } from "./ListDivider";
 import { Column } from "./Column";
 import { Row } from "./Row";
 import { IconButton } from "./IconButton";
-import { jss } from "./jss";
+import { toClassnames } from "./jss";
 
-const jsStyles = {
+const jsss = {
   dialog: {
     border: "1px solid var(--divider)",
     borderRadius: "var(--border-radius-m)",
@@ -44,8 +44,8 @@ export const Dialog = ({
   close: () => void;
 }) => {
   return (
-    <BaseView jsStyle={jsStyles.root}>
-      <Column jsStyle={jsStyles.header}>
+    <BaseView jss={jsss.root}>
+      <Column jss={jsss.header}>
         <Row padding="medium" justify="space-between" align="center">
           <Text size="medium" color="secondary">
             {label}
@@ -61,7 +61,7 @@ export const Dialog = ({
         </Row>
         <ListDivider />
       </Column>
-      <BaseView jsStyle={jsStyles.content}>{children}</BaseView>
+      <BaseView jss={jsss.content}>{children}</BaseView>
     </BaseView>
   );
 };
@@ -107,7 +107,7 @@ export function useDialog<Input>(
           dialogRef.current = ref;
           ref && ref.showModal();
         }}
-        className={jss(jsStyles.dialog)}
+        className={toClassnames(jsss.dialog)}
         onClose={() => {
           closeRef.current();
         }}

package/src/Dropdown.tsx

@@ -8,7 +8,7 @@ import { useNavigation } from "./useNavigation";
 import { useRefEffect } from "./useRefEffect";
 import { Gap, JSStyle, Padding, Size, getBackground } from "./jss";
 
-const jsStyles: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSStyle } = {
   root: {
     position: "relative",
     display: "flex",
@@ -35,8 +35,8 @@ export function Dropdown<T extends string | number>({
   options,
   selection,
   setSelection,
-  jsStyle,
-  jsStyleButton,
+  jss,
+  jssButton,
   optionLabel,
   padding,
   size,
@@ -47,8 +47,8 @@ export function Dropdown<T extends string | number>({
   options: Set<T>;
   setSelection: (selection: T) => void;
   selection: T;
-  jsStyle?: JSStyle;
-  jsStyleButton?: JSStyle;
+  jss?: JSStyle;
+  jssButton?: JSStyle;
   optionLabel: (option: T) => string;
   padding?: Padding;
   gap?: Gap;
@@ -75,7 +75,7 @@ export function Dropdown<T extends string | number>({
   }, [expanded]);
 
   return (
-    <BaseView ref={rootRef} jsStyle={[jsStyles.root, jsStyle]}>
+    <BaseView ref={rootRef} jss={[jsss.root, jss]}>
       <Button
         size={size}
         padding={padding}
@@ -86,7 +86,7 @@ export function Dropdown<T extends string | number>({
         role="combobox"
         justify="space-between"
         tabIndex={0}
-        jsStyle={[jsStyles.button, jsStyleButton]}
+        jss={[jsss.button, jssButton]}
         color="positive"
         icon="fa-chevron-down"
         iconPosition="right"
@@ -100,7 +100,7 @@ export function Dropdown<T extends string | number>({
       {expanded && (
         <Column
           gap={gap}
-          jsStyle={[jsStyles.dropdown, getBackground("secondary-background")]}
+          jss={[jsss.dropdown, getBackground("secondary-background")]}
           id={id}
           role="listbox"
           aria-label={label}

package/src/FlexLayout.tsx

@@ -22,7 +22,7 @@ export interface FlexLayoutProps extends BaseViewProps {
 export const FlexLayout = React.forwardRef(
   (
     {
-      jsStyle,
+      jss,
       gap = "none",
       justify = "none",
       align = "none",
@@ -35,7 +35,7 @@ export const FlexLayout = React.forwardRef(
     return (
       <BaseView
         ref={ref}
-        jsStyle={[
+        jss={[
           {
             display: "flex",
             flexDirection: direction,
@@ -44,7 +44,7 @@ export const FlexLayout = React.forwardRef(
             alignItems: align,
           },
           getPadding(padding),
-          jsStyle,
+          jss,
         ]}
         {...otherProps}
       />

package/src/Icon.tsx

@@ -3,7 +3,7 @@ import { BaseView } from "./BaseView";
 import { IconType } from "./IconType";
 import { Size, TextColor, getTextColor } from "./jss";
 
-const jsStyles = {
+const jsss = {
   root: {
     display: "flex",
     justifyContent: "center",
@@ -88,15 +88,15 @@ export function Icon({
     <BaseView
       key={icon}
       aria-label={ariaLabel}
-      jsStyle={[
-        jsStyles.root,
-        size === "xsmall" && jsStyles.xsmall,
-        size === "small" && jsStyles.small,
-        size === "medium" && jsStyles.medium,
-        size === "large" && jsStyles.large,
-        size === "xlarge" && jsStyles.xlarge,
-        size === "xxlarge" && jsStyles.xxlarge,
-        size === "xxxlarge" && jsStyles.xxxlarge,
+      jss={[
+        jsss.root,
+        size === "xsmall" && jsss.xsmall,
+        size === "small" && jsss.small,
+        size === "medium" && jsss.medium,
+        size === "large" && jsss.large,
+        size === "xlarge" && jsss.xlarge,
+        size === "xxlarge" && jsss.xxlarge,
+        size === "xxxlarge" && jsss.xxxlarge,
         getTextColor(color),
       ]}
     >

package/src/IconButton.tsx

@@ -20,22 +20,14 @@ export interface IconButtonProps extends BaseButtonProps {
 
 export const IconButton = React.forwardRef(
   (
-    {
-      icon,
-      size,
-      color,
-      bare,
-      disabled,
-      jsStyle,
-      ...buttonProps
-    }: IconButtonProps,
+    { icon, size, color, bare, disabled, jss, ...buttonProps }: IconButtonProps,
     ref?: React.Ref<HTMLButtonElement>
   ) => {
     return (
       <BaseButton
         {...buttonProps}
         bare={bare}
-        jsStyle={[
+        jss={[
           {
             display: "flex",
             justifyContent: "center",
@@ -49,7 +41,7 @@ export const IconButton = React.forwardRef(
               transform: "scale(0.92)",
             },
           },
-          jsStyle,
+          jss,
         ]}
         color={color}
         ref={ref}

package/src/IconLink.tsx

@@ -27,7 +27,7 @@ export const IconLink = React.forwardRef(
       <BaseLink
         {...otherProps}
         bare={bare}
-        jsStyle={[
+        jss={[
           {
             display: "flex",
             justifyContent: "center",

package/src/Interactable.tsx

@@ -7,7 +7,7 @@ export type InteractableColor =
   | "dark"
   | "light";
 
-const jsStyles = {
+const jsss = {
   root: {
     cursor: "pointer",
     display: "inline-flex",
@@ -94,18 +94,18 @@ export function getInteractableJSStyles({
   border: boolean;
 }): Array<JSStyle> {
   return [
-    jsStyles.root,
-    color === "dark" && jsStyles.dark,
-    color === "light" && jsStyles.light,
-    color === "positive" && jsStyles.positive,
-    color === "primary" && jsStyles.primary,
-    color === "negative" && jsStyles.negative,
+    jsss.root,
+    color === "dark" && jsss.dark,
+    color === "light" && jsss.light,
+    color === "positive" && jsss.positive,
+    color === "primary" && jsss.primary,
+    color === "negative" && jsss.negative,
     border && {
       border: `1px solid ${getCSSColor(color, disabled, bare)}`,
     },
-    bare && jsStyles.bare,
-    disabled && jsStyles.disabled,
-    !bare && jsStyles.opacityHover,
+    bare && jsss.bare,
+    disabled && jsss.disabled,
+    !bare && jsss.opacityHover,
     animateInteraction &&
       !disabled && {
         position: "relative",