aidos-ui 3.0.31 → 4.0.0

package/src/DatetimeInput.tsx

@@ -4,7 +4,7 @@ import { Box } from "./Box";
 import { Icon } from "./Icon";
 import { IconType } from "./IconType";
 import { Row } from "./Row";
-import { JSStyle } from "./jss";
+import { JSS } from "./jss";
 
 export interface DatetimeInputProps extends BaseInputProps {
   onDateChange: (date: Date) => void;
@@ -12,7 +12,7 @@ export interface DatetimeInputProps extends BaseInputProps {
   icon?: IconType;
   addOn?: ReactNode;
   onChange?: undefined;
-  jss?: JSStyle;
+  jss?: JSS;
 }
 
 const jsss = {

package/src/Dropdown.tsx

@@ -6,9 +6,9 @@ import { Button } from "./Button";
 import { Column } from "./Column";
 import { useNavigation } from "./useNavigation";
 import { useRefEffect } from "./useRefEffect";
-import { Gap, JSStyle, Padding, Size, getBackground } from "./jss";
+import { Gap, JSS, Padding, Size, getBackground } from "./jss";
 
-const jsss: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSS } = {
   root: {
     position: "relative",
     display: "flex",
@@ -47,8 +47,8 @@ export function Dropdown<T extends string | number>({
   options: Set<T>;
   setSelection: (selection: T) => void;
   selection: T;
-  jss?: JSStyle;
-  jssButton?: JSStyle;
+  jss?: JSS;
+  jssButton?: JSS;
   optionLabel: (option: T) => string;
   padding?: Padding;
   gap?: Gap;

package/src/IconLink.tsx

@@ -20,7 +20,7 @@ export interface IconLinkProps extends BaseLinkProps {
 
 export const IconLink = React.forwardRef(
   (
-    { icon, size, color, bare, disabled, ...otherProps }: IconLinkProps,
+    { icon, size, color, bare, disabled, jss, ...otherProps }: IconLinkProps,
     ref?: React.Ref<HTMLAnchorElement>
   ) => {
     return (
@@ -42,6 +42,7 @@ export const IconLink = React.forwardRef(
               transform: "scale(0.92)",
             },
           },
+          jss,
         ]}
         color={color}
         ref={ref}

package/src/Interactable.tsx

@@ -1,4 +1,4 @@
-import { JSStyle, Padding, TextColor, cssVar, getPadding } from "./jss";
+import { JSS, Padding, TextColor, cssVar, getPadding } from "./jss";
 
 export type InteractableColor =
   | "positive"
@@ -78,7 +78,7 @@ const jsss = {
   colorHover: {},
 };
 
-export function getInteractableJSStyles({
+export function getInteractableJSS({
   color,
   bare,
   disabled,
@@ -92,7 +92,7 @@ export function getInteractableJSStyles({
   animateInteraction: boolean;
   padding: Padding;
   border: boolean;
-}): Array<JSStyle> {
+}): Array<JSS> {
   return [
     jsss.root,
     color === "dark" && jsss.dark,
@@ -168,7 +168,7 @@ export const getCSSColor = (
   }
 };
 
-export const getInteractableListItemJSStyles = ({
+export const getInteractableListItemJSS = ({
   bare,
   selected,
 }: {

package/src/ListButtonItem.tsx

@@ -4,7 +4,7 @@ import { BaseListItem, BaseListItemProps } from "./BaseListItem";
 import {
   InteractableColor,
   getGlyphColor,
-  getInteractableListItemJSStyles,
+  getInteractableListItemJSS,
 } from "./Interactable";
 import { BaseButton } from "./BaseButton";
 import { useListContext } from "./List";
@@ -57,7 +57,7 @@ export const ListButtonItem = React.forwardRef(
             bare={true}
             color={bare ? "primary" : color}
             ref={ref}
-            jss={getInteractableListItemJSStyles({ bare, selected })}
+            jss={getInteractableListItemJSS({ bare, selected })}
             onClick={onClick}
           >
             {content}

package/src/ListLinkItem.tsx

@@ -4,7 +4,7 @@ import { BaseListItem, BaseListItemProps } from "./BaseListItem";
 import {
   InteractableColor,
   getGlyphColor,
-  getInteractableListItemJSStyles,
+  getInteractableListItemJSS,
 } from "./Interactable";
 import { BaseLink } from "./BaseLink";
 import { useListContext } from "./List";
@@ -64,7 +64,7 @@ export const ListLinkItem = React.forwardRef(
             color={color}
             href={href}
             ref={ref}
-            jss={getInteractableListItemJSStyles({ bare, selected })}
+            jss={getInteractableListItemJSS({ bare, selected })}
             onClick={onClick}
           >
             {content}

package/src/MenuIcon.tsx

@@ -1,6 +1,6 @@
 import { BaseView } from "./BaseView";
 import { Column } from "./Column";
-import { Color, JSStyle, getBackground } from "./jss";
+import { Color, JSS, getBackground } from "./jss";
 
 export function MenuIcon({ open, color }: { open: boolean; color: Color }) {
   return (
@@ -31,7 +31,7 @@ export function MenuIcon({ open, color }: { open: boolean; color: Color }) {
   );
 }
 
-function Bar({ jss, color }: { jss: JSStyle; color: Color }) {
+function Bar({ jss, color }: { jss: JSS; color: Color }) {
   return (
     <BaseView
       jss={[

package/src/NextJSRouter.tsx

@@ -5,9 +5,9 @@ import { Column } from "./Column";
 import { ListDivider } from "./ListDivider";
 import { BaseView } from "./BaseView";
 import { useRouterState } from "./NextJSRouterState";
-import { JSStyle } from "./jss";
+import { JSS } from "./jss";
 
-const jsss: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSS } = {
   root: {
     display: "flex",
     flexDirection: "column",

package/src/Popover.tsx

@@ -3,9 +3,9 @@ import { queryFocusables } from "./aria";
 
 import { BaseView } from "./BaseView";
 import { useRefEffect } from "./useRefEffect";
-import { JSStyle, toClassnames } from "./jss";
+import { JSS, toClassnames } from "./jss";
 
-const jsss: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSS } = {
   popover: {
     padding: 0,
     zIndex: 1,
@@ -77,8 +77,8 @@ export function Popover({ children, close }) {
 
 interface PopoverTriggerProps<Input> {
   PopoverComponent: (props: { close: () => void } & Input) => JSX.Element;
-  jss?: JSStyle;
-  dialogJSStyle?: JSStyle;
+  jss?: JSS;
+  jssDialog?: JSS;
   className?: undefined;
   grow?: boolean;
   shrink?: boolean;
@@ -89,7 +89,7 @@ interface PopoverTriggerProps<Input> {
 export function PopoverTrigger<Input>({
   PopoverComponent,
   jss,
-  dialogJSStyle,
+  jssDialog,
   grow,
   shrink,
   tag,
@@ -127,7 +127,7 @@ export function PopoverTrigger<Input>({
         ref={(ref: null | HTMLDialogElement) => {
           dialogRef.current = ref;
         }}
-        className={toClassnames([jsss.popover, dialogJSStyle])}
+        className={toClassnames([jsss.popover, jssDialog])}
         onClose={() => {
           setPopover(null);
         }}

package/src/ProgressBar.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { BaseView } from "./BaseView";
-import { Color, Size, JSStyle, getBackground } from "./jss";
+import { Color, Size, JSS, getBackground } from "./jss";
 
-const jsss: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSS } = {
   root: {
     width: "100%",
     display: "flex",
@@ -40,7 +40,7 @@ export function ProgressBar({
   progress: number;
   color: Color;
   size: Size;
-  jss?: JSStyle;
+  jss?: JSS;
 }) {
   return (
     <BaseView

package/src/Providers.tsx

@@ -3,7 +3,7 @@ import { DarkModeProvider } from "./DarkMode";
 import { DialogProvider } from "./Dialog";
 import { IconProvider } from "./Icon";
 import { useCookie } from "./useCookie";
-import { JSStylesProvider, Theme } from "./jss";
+import { JSSProvider, Theme } from "./jss";
 
 export function Providers({
   children,
@@ -22,12 +22,12 @@ export function Providers({
   );
 
   return (
-    <JSStylesProvider themes={themes}>
+    <JSSProvider themes={themes}>
       <IconProvider>
         <DarkModeProvider enabled={darkModeEnabled} toggle={toggleDarkMode}>
           <DialogProvider>{children}</DialogProvider>
         </DarkModeProvider>
       </IconProvider>
-    </JSStylesProvider>
+    </JSSProvider>
   );
 }

package/src/RangeInput.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { BaseInput, BaseInputProps } from "./BaseInput";
 import { Row } from "./Row";
-import { Gap, JSStyle, Padding, cssVar } from "./jss";
+import { Gap, JSS, Padding, cssVar } from "./jss";
 
 export interface RangeInputProps extends BaseInputProps {
   onValueChange: (value: number) => void;
   value: number;
-  rootJSStyle?: JSStyle;
+  jssRoot?: JSS;
   onChange?: undefined;
   padding?: Padding;
   gap?: Gap;
@@ -19,7 +19,7 @@ export const RangeInput = React.forwardRef(
     {
       value,
       onValueChange,
-      rootJSStyle,
+      jssRoot,
       jss,
       gap = "medium",
       padding = "none",
@@ -45,7 +45,7 @@ export const RangeInput = React.forwardRef(
               backgroundColor: cssVar("--light-highlight"),
             },
           },
-          rootJSStyle,
+          jssRoot,
         ]}
       >
         {addOnPosition === "start" && addOn}

package/src/Select.tsx

@@ -1,10 +1,10 @@
 import { forwardRef } from "react";
-import { JSStyle, cssVar, toClassnames } from "./jss";
+import { JSS, cssVar, toClassnames } from "./jss";
 
 export interface SelectProps extends React.HTMLAttributes<HTMLSelectElement> {
   value: string;
   onValueChange: (value: string) => void;
-  jss?: JSStyle;
+  jss?: JSS;
   ref?: React.Ref<HTMLSelectElement>;
   className?: undefined;
 }

package/src/StaticCheckbox.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { BaseView } from "./BaseView";
 import { Icon } from "./Icon";
-import { JSStyle, Size, cssVar } from "./jss";
+import { JSS, Size, cssVar } from "./jss";
 import { IconType } from "./IconType";
 
 type StaticCheckboxProps = {
@@ -10,7 +10,7 @@ type StaticCheckboxProps = {
   icon?: IconType;
 };
 
-const jsss: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSS } = {
   border: {
     position: "absolute",
     top: "var(--spacing-xs)",

package/src/Sublist.tsx

@@ -3,7 +3,7 @@ import { ListButtonItem } from "./ListButtonItem";
 import { Icon } from "./Icon";
 import { Box } from "./Box";
 import { Row } from "./Row";
-import { JSStyle } from "./jss";
+import { JSS } from "./jss";
 
 export function Sublist({
   children,
@@ -19,7 +19,7 @@ export function Sublist({
   initialState?: {
     collapsed: boolean;
   };
-  jss?: JSStyle;
+  jss?: JSS;
   secondaryAddOn?: ReactNode;
 }) {
   const [collapsed, setCollapsed] = React.useState(initialState.collapsed);

package/src/Tabs.tsx

@@ -1,6 +1,6 @@
 import { BaseLink } from "./BaseLink";
 import { Row, RowProps } from "./Row";
-import { JSStyle, Padding, Size, cssVar, getPadding } from "./jss";
+import { JSS, Padding, Size, cssVar, getPadding } from "./jss";
 import { useNavigation } from "./useNavigation";
 import { Text } from "./Text";
 import { ReactNode } from "react";
@@ -21,7 +21,7 @@ export interface TabsProps extends RowProps {
   labelSize?: Size;
   bare?: boolean;
   tabPadding?: Padding;
-  tabJSStyle?: JSStyle | ((data: { selected: boolean }) => JSStyle);
+  jssTab?: JSS | ((data: { selected: boolean }) => JSS);
   labelRenderer?: (label: string) => ReactNode;
 }
 
@@ -32,7 +32,7 @@ export function Tabs({
   tabPadding = "medium",
   labelSize = "large",
   jss,
-  tabJSStyle,
+  jssTab,
   labelRenderer,
   ["aria-controls"]: ariaControls,
   ...otherProps
@@ -93,9 +93,7 @@ export function Tabs({
                   },
                 },
                 getPadding(tabPadding),
-                typeof tabJSStyle === "function"
-                  ? tabJSStyle({ selected })
-                  : tabJSStyle,
+                typeof jssTab === "function" ? jssTab({ selected }) : jssTab,
               ]}
             >
               {addOnPosition === "start" && addOn}

package/src/Text.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import {
-  JSStyle,
+  JSS,
   Size,
   TextColor,
   cssVar,
@@ -29,7 +29,7 @@ export interface TextProps {
   align?: "center" | "none";
   type?: TextType;
   grow?: boolean;
-  jss?: JSStyle;
+  jss?: JSS;
   id?: string;
   htmlFor?: string;
 }

package/src/TextArea.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { JSStyle, Padding, cssVar, getPadding, toClassnames } from "./jss";
+import { JSS, Padding, cssVar, getPadding, toClassnames } from "./jss";
 
 export interface TextAreaProps
   extends React.InputHTMLAttributes<HTMLTextAreaElement> {
-  jss?: JSStyle;
+  jss?: JSS;
   onValueChange?: (value: string) => void;
   value?: string;
   className?: undefined;

package/src/TextInput.tsx

@@ -1,12 +1,12 @@
 import React, { ReactNode } from "react";
 import { BaseInput, BaseInputProps } from "./BaseInput";
 import { Row } from "./Row";
-import { Gap, JSStyle, Padding, cssVar, getPadding } from "./jss";
+import { Gap, JSS, Padding, cssVar, getPadding } from "./jss";
 import { Column } from "./Column";
 
 export interface TextInputProps extends BaseInputProps {
   onValueChange?: (value: string) => void;
-  rootJSStyle?: JSStyle;
+  jssRoot?: JSS;
   addOn?: ReactNode;
   addOnPosition?: "start" | "end";
   gap?: Gap;
@@ -20,7 +20,7 @@ export const TextInput = React.forwardRef(
     {
       value,
       onValueChange,
-      rootJSStyle,
+      jssRoot,
       jss,
       addOn,
       gap = "small",
@@ -54,7 +54,7 @@ export const TextInput = React.forwardRef(
                   outlineOffset: -2,
                 },
               },
-          rootJSStyle,
+          jssRoot,
         ]}
       >
         {addOnPosition === "start" && addOn && (

package/src/TextPairing.tsx

@@ -12,7 +12,7 @@ import {
   Padding,
   Align,
   cssVar,
-  JSStyle,
+  JSS,
 } from "./jss";
 
 export interface TextPairingProps {
@@ -31,7 +31,7 @@ export interface TextPairingProps {
   grow?: boolean;
   shrink?: boolean;
   headlineBold?: boolean;
-  jss?: JSStyle;
+  jss?: JSS;
 }
 
 export function TextPairing({

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, toClassnames } from "./jss";
+import { JSS, cssVar, toClassnames } from "./jss";
 
-const jsss: { [key: string]: JSStyle } = {
+const jsss: { [key: string]: JSS } = {
   tooltip: {
     top: "-100%",
     transform: "translateY(50%)",
@@ -20,7 +20,7 @@ const jsss: { [key: string]: JSStyle } = {
 
 interface TooltipProps {
   content: string;
-  jss?: JSStyle;
+  jss?: JSS;
   className?: undefined;
   tag?: keyof HTMLElementTagNameMap;
   children: JSX.Element;

package/src/jss.tsx

@@ -11,13 +11,13 @@ export type Styles = CSS.Properties<
   string | number | CSS.Properties<string | number>
 >;
 
-export type JSStyle =
+export type JSS =
   | Styles
   | null
   | false
   | undefined
   | { [key: string]: Styles }
-  | Array<JSStyle>;
+  | Array<JSS>;
 
 const aliases: {
   [alias: string]: (value: StylesValueType) => [string, StylesValueType][];
@@ -137,21 +137,21 @@ const getCSS = (key: string, value): [string, string] => {
   return [cssProp, cssValue];
 };
 
-const flattenJSStyle = (jss: JSStyle): Styles => {
+const flattenJSS = (jss: JSS): Styles => {
   if (!jss) {
     return {};
   } else if (Array.isArray(jss)) {
     // @ts-ignore
-    return jss.reduce((acc: Styles, jss: JSStyle) => {
-      return { ...acc, ...flattenJSStyle(jss) };
+    return jss.reduce((acc: Styles, jss: JSS) => {
+      return { ...acc, ...flattenJSS(jss) };
     }, {});
   } else {
     return jss;
   }
 };
 
-export const toClassnames = (jss: JSStyle): string => {
-  jss = flattenJSStyle(jss);
+export const toClassnames = (jss: JSS): string => {
+  jss = flattenJSS(jss);
 
   const stylesStack = Object.entries(jss);
   const classNames = [];
@@ -205,7 +205,7 @@ export const toClassnames = (jss: JSStyle): string => {
 
 const serverStyles = [];
 
-export function JSStylesProvider({
+export function JSSProvider({
   themes,
   children,
 }: {
@@ -324,7 +324,7 @@ export function getSpacing(spacing: Spacing): string {
   }
 }
 
-export function getPadding(padding: Padding): JSStyle {
+export function getPadding(padding: Padding): JSS {
   if (Array.isArray(padding)) {
     const [vertical, horizontal] = padding;
     return {
@@ -340,7 +340,7 @@ export function getPadding(padding: Padding): JSStyle {
   }
 }
 
-export function getMargin(margin: Margin): JSStyle {
+export function getMargin(margin: Margin): JSS {
   if (Array.isArray(margin)) {
     const [vertical, horizontal] = margin;
     return {
@@ -559,7 +559,7 @@ const backgroundStyles = {
   },
 };
 
-export const getBackground = (color: Color): JSStyle => {
+export const getBackground = (color: Color): JSS => {
   return backgroundStyles[color];
 };
 
@@ -572,25 +572,25 @@ export const TABLET_MEDIA = `@media (min-width: ${MOBILE}px) and (max-width: ${T
 export const LAPTOP_MEDIA = `@media (min-width: ${TABLET}px) and (max-width: ${LAPTOP}px)`;
 export const DESKTOP_MEDIA = `@media (min-width: ${LAPTOP}px)`;
 
-export function mobile(jss: JSStyle): { [key: string]: JSStyle } {
+export function mobile(jss: JSS): { [key: string]: JSS } {
   return {
     [MOBILE_MEDIA]: jss,
   };
 }
 
-export function tablet(jss: JSStyle): { [key: string]: JSStyle } {
+export function tablet(jss: JSS): { [key: string]: JSS } {
   return {
     [TABLET_MEDIA]: jss,
   };
 }
 
-export function laptop(jss: JSStyle): { [key: string]: JSStyle } {
+export function laptop(jss: JSS): { [key: string]: JSS } {
   return {
     [LAPTOP_MEDIA]: jss,
   };
 }
 
-export function desktop(jss: JSStyle): { [key: string]: JSStyle } {
+export function desktop(jss: JSS): { [key: string]: JSS } {
   return {
     [DESKTOP_MEDIA]: jss,
   };

package/src/pages/_app.tsx

@@ -292,7 +292,7 @@ export default function App({ Component, pageProps }: AppProps) {
                 justify="space-between"
               >
                 <TextInput
-                  rootJSStyle={{ flexGrow: 1 }}
+                  jssRoot={{ flexGrow: 1 }}
                   ref={queryInputRef}
                   role="combobox"
                   aria-haspopup="grid"