aidos-ui 3.0.30 → 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;
+  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,7 +93,7 @@ export function Tabs({
                   },
                 },
                 getPadding(tabPadding),
-                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;