aidos-ui 3.0.31 → 4.0.1

package/src/Calendar.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { BaseView } from "./BaseView";
-import { JSStyle } from "./jss";
+import { JSS } from "./jss";
 
 const dateFormatter = Intl.DateTimeFormat("en-UK", {
   weekday: "short",
@@ -23,8 +23,8 @@ export const Calendar = React.forwardRef(
       jss,
     }: {
       date: Date;
-      header: (props: { weekday: string }) => JSX.Element;
-      jss?: JSStyle;
+      header: (props: { weekday: string }) => React.JSX.Element;
+      jss?: JSS;
       cell: (props: {
         today?: boolean;
         date: Date;
@@ -33,7 +33,7 @@ export const Calendar = React.forwardRef(
         left: boolean;
         right: boolean;
         bottom: boolean;
-      }) => JSX.Element;
+      }) => React.JSX.Element;
     },
     ref?: React.Ref<HTMLElement>
   ) => {

package/src/DateInput.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 DateInputProps extends BaseInputProps {
   onDateChange: (date: Date) => void;
@@ -12,7 +12,7 @@ export interface DateInputProps extends BaseInputProps {
   icon?: IconType;
   addOn?: ReactNode;
   onChange?: undefined;
-  jsss?: JSStyle;
+  jsss?: JSS;
 }
 
 export const DateInput = React.forwardRef(

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/Dialog.tsx

@@ -40,7 +40,7 @@ export const Dialog = ({
   close,
 }: {
   label: string;
-  children: JSX.Element;
+  children: React.JSX.Element;
   close: () => void;
 }) => {
   return (
@@ -71,7 +71,7 @@ const DialogContext = React.createContext<{ setDialog: React.Dispatch<any> }>({
 });
 
 export function DialogProvider({ children }) {
-  const [dialog, setDialog] = useState<JSX.Element>(null);
+  const [dialog, setDialog] = useState<React.JSX.Element>(null);
   const value = useMemo(() => ({ setDialog }), []);
 
   return (
@@ -83,7 +83,7 @@ export function DialogProvider({ children }) {
 }
 
 export function useDialog<Input>(
-  DialogComponent: (props: { close: () => void } & Input) => JSX.Element,
+  DialogComponent: (props: { close: () => void } & Input) => React.JSX.Element,
   options: { closeOnOutsideClick: boolean }
 ) {
   const { setDialog } = useContext(DialogContext);

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/Icon.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import React from "react";
+import { Icon as IconifyIcon } from "@iconify/react";
 import { BaseView } from "./BaseView";
 import { IconType } from "./IconType";
 import { Size, TextColor, getTextColor } from "./jss";
@@ -43,33 +44,7 @@ const jsss = {
   },
 };
 
-let initialized = false;
-
-const initializeIcons = () => {
-  if (initialized) {
-    return;
-  }
-
-  const hasIconify = document.getElementById("iconify");
-
-  if (hasIconify) {
-    initialized = true;
-    return;
-  }
-
-  const script = document.createElement("script");
-  script.src = "https://code.iconify.design/3/3.1.1/iconify.min.js";
-  script.id = "iconify";
-  document.head.appendChild(script);
-
-  initialized = true;
-};
-
-export function IconProvider({ children }: { children: JSX.Element }) {
-  useEffect(() => {
-    initializeIcons();
-  }, []);
-
+export function IconProvider({ children }: { children: React.JSX.Element }) {
   return children;
 }
 
@@ -86,7 +61,6 @@ export function Icon({
 }) {
   return (
     <BaseView
-      key={icon}
       aria-label={ariaLabel}
       jss={[
         jsss.root,
@@ -100,7 +74,7 @@ export function Icon({
         getTextColor(color),
       ]}
     >
-      <span className="iconify" data-icon={icon}></span>
+      <IconifyIcon icon={icon} width="100%" height="100%" />
     </BaseView>
   );
 }

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,
@@ -76,26 +76,26 @@ export function Popover({ children, close }) {
 }
 
 interface PopoverTriggerProps<Input> {
-  PopoverComponent: (props: { close: () => void } & Input) => JSX.Element;
-  jss?: JSStyle;
-  dialogJSStyle?: JSStyle;
+  PopoverComponent: (props: { close: () => void } & Input) => React.JSX.Element;
+  jss?: JSS;
+  jssDialog?: JSS;
   className?: undefined;
   grow?: boolean;
   shrink?: boolean;
   tag?: keyof HTMLElementTagNameMap;
-  children: (props: { toggle: (input: Input) => void }) => JSX.Element;
+  children: (props: { toggle: (input: Input) => void }) => React.JSX.Element;
 }
 
 export function PopoverTrigger<Input>({
   PopoverComponent,
   jss,
-  dialogJSStyle,
+  jssDialog,
   grow,
   shrink,
   tag,
   children,
 }: PopoverTriggerProps<Input>) {
-  const [popover, setPopover] = useState<JSX.Element>(null);
+  const [popover, setPopover] = useState<React.JSX.Element>(null);
   const dialogRef = useRef<null | HTMLDialogElement>(null);
 
   const toggle = (input: Input) => {
@@ -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,13 +3,13 @@ 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,
   themes,
 }: {
-  children: JSX.Element;
+  children: React.JSX.Element;
   themes: { light: Theme; dark: Theme };
 }) {
   const [darkModeEnabled, setDarkModeEnabled] = useCookie("dark-mode", {
@@ -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,16 +1,16 @@
 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;
-  addOn?: JSX.Element;
+  addOn?: React.JSX.Element;
   addOnPosition?: "start" | "end";
 }
 
@@ -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/Storage.tsx

@@ -36,7 +36,7 @@ export function createStorage<State>({
 
   const state = { current: initialState };
 
-  function Storage({ children }: { children: ReactNode }): JSX.Element {
+  function Storage({ children }: { children: ReactNode }): React.JSX.Element {
     const emitterRef = useRef(createEmitter<State>());
 
     const subscribe = useCallback((callback: Callback<State>) => {

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,18 +1,29 @@
 import React, { ReactNode } from "react";
 import { BaseInput, BaseInputProps } from "./BaseInput";
-import { Row } from "./Row";
-import { Gap, JSStyle, Padding, cssVar, getPadding } from "./jss";
 import { Column } from "./Column";
+import { Row } from "./Row";
+import { Gap, JSS, Padding, Size, cssVar, getPadding } from "./jss";
+
+const fontSize = {
+  xsmall: cssVar("--font-xsmall"),
+  small: cssVar("--font-small"),
+  medium: cssVar("--font-medium"),
+  large: cssVar("--font-large"),
+  xlarge: cssVar("--font-xlarge"),
+  xxlarge: cssVar("--font-xxlarge"),
+  xxxlarge: cssVar("--font-xxxlarge"),
+};
 
-export interface TextInputProps extends BaseInputProps {
+export interface TextInputProps extends Omit<BaseInputProps, "size"> {
   onValueChange?: (value: string) => void;
-  rootJSStyle?: JSStyle;
+  jssRoot?: JSS;
   addOn?: ReactNode;
   addOnPosition?: "start" | "end";
   gap?: Gap;
   onChange?: undefined;
   padding?: Padding;
   bare?: boolean;
+  size?: Size;
 }
 
 export const TextInput = React.forwardRef(
@@ -20,13 +31,14 @@ export const TextInput = React.forwardRef(
     {
       value,
       onValueChange,
-      rootJSStyle,
+      jssRoot,
       jss,
       addOn,
       gap = "small",
       addOnPosition = "start",
       padding = "medium",
       bare,
+      size = "medium",
       ...inputProps
     }: TextInputProps,
     ref?: React.Ref<HTMLInputElement>
@@ -54,7 +66,7 @@ export const TextInput = React.forwardRef(
                   outlineOffset: -2,
                 },
               },
-          rootJSStyle,
+          jssRoot,
         ]}
       >
         {addOnPosition === "start" && addOn && (
@@ -81,8 +93,8 @@ export const TextInput = React.forwardRef(
               color: cssVar("--primary-text"),
               outline: "none",
               border: "none",
-              fontSize: 20,
-              lineHeight: 24 / 20,
+              fontSize: fontSize[size],
+              lineHeight: 1.2,
               "::placeholder": {
                 color: cssVar("--subtle-text"),
               },

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({