aidos-ui 4.0.3 → 4.0.5

package/src/Interactable.tsx

@@ -1,210 +0,0 @@
-import { JSS, Padding, TextColor, cssVar, getPadding } from "./jss";
-
-export type InteractableColor =
-  | "positive"
-  | "primary"
-  | "negative"
-  | "dark"
-  | "light";
-
-const jsss = {
-  root: {
-    cursor: "pointer",
-    display: "inline-flex",
-    alignItems: "center",
-    transition: "opacity 0.1s ease-in",
-    outlineColor: cssVar("--outline"),
-    "[aria-disabled=true]": {
-      color: cssVar("--secondary-text"),
-      backgroundColor: cssVar("--background-button-secondary"),
-    },
-    ":focus-visible": {
-      outlineWidth: "2px",
-      outlineStyle: "solid",
-      outlineOffset: -2,
-    },
-  },
-  dark: {
-    backgroundColor: "black",
-    "[aria-disabled=true]": {
-      backgroundColor: cssVar("--background-button-disabled"),
-    },
-  },
-  light: {
-    backgroundColor: "white",
-    "[aria-disabled=true]": {
-      backgroundColor: cssVar("--background-button-disabled"),
-    },
-  },
-  positive: {
-    backgroundColor: cssVar("--background-button-positive"),
-    "[aria-disabled=true]": {
-      backgroundColor: cssVar("--background-button-disabled"),
-    },
-  },
-  primary: {
-    backgroundColor: cssVar("--background-button-secondary"),
-    "[aria-disabled=true]": {
-      backgroundColor: cssVar("--background-button-disabled"),
-    },
-  },
-  negative: {
-    backgroundColor: cssVar("--background-button-negative"),
-    "[aria-disabled=true]": {
-      backgroundColor: cssVar("--background-button-disabled"),
-    },
-  },
-  disabled: {
-    cursor: "default",
-  },
-  bare: {
-    backgroundColor: "inherit",
-    outlineColor: cssVar("--outline"),
-    "[aria-disabled=true]": {
-      backgroundColor: "inherit",
-    },
-    "[aria-disabled=true]:hover": {
-      backgroundColor: "inherit",
-    },
-  },
-  opacityHover: {
-    ":hover": {
-      opacity: 0.8,
-    },
-    "[aria-disabled=true]:hover": {
-      opacity: 1,
-    },
-  },
-  colorHover: {},
-};
-
-export function getInteractableJSS({
-  color,
-  bare,
-  disabled,
-  animateInteraction,
-  padding,
-  border,
-}: {
-  color: InteractableColor;
-  bare: boolean;
-  disabled: boolean;
-  animateInteraction: boolean;
-  padding: Padding;
-  border: boolean;
-}): Array<JSS> {
-  return [
-    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 && jsss.bare,
-    disabled && jsss.disabled,
-    !bare && jsss.opacityHover,
-    animateInteraction &&
-      !disabled && {
-        position: "relative",
-        ":active": {
-          opacity: 0.95,
-          top: 1,
-        },
-        "[aria-disabled=true]:active": {
-          top: 0,
-          opacity: 1,
-        },
-      },
-    getPadding(padding),
-  ];
-}
-
-export const getGlyphColor = (
-  color: InteractableColor,
-  disabled: boolean | undefined,
-  bare: boolean | undefined
-): TextColor => {
-  if (disabled) {
-    return "subtle";
-  }
-
-  switch (color) {
-    case "positive":
-      return bare ? "highlight" : "light";
-    case "negative":
-      return bare ? "negative" : "light";
-    case "primary":
-      return bare ? "primary" : "secondary";
-    case "dark":
-      return bare ? "primary" : "light";
-    case "light":
-      return bare ? "light" : "primary";
-  }
-};
-
-export const getCSSColor = (
-  color: InteractableColor,
-  disabled: boolean | undefined,
-  bare: boolean | undefined
-): string => {
-  if (disabled) {
-    return cssVar("--subtle-text");
-  }
-
-  switch (color) {
-    case "positive":
-      return bare ? cssVar("--highlight") : cssVar("--light-text");
-    case "negative":
-      return bare ? cssVar("--negative-text") : cssVar("--light-text");
-    case "primary":
-      return bare ? cssVar("--primary-text") : cssVar("--secondary-text");
-    case "dark":
-      return bare ? cssVar("--primary-text") : cssVar("--light-text");
-    case "light":
-      return bare ? cssVar("--light-text") : cssVar("--primary-text");
-  }
-};
-
-export const getInteractableListItemJSS = ({
-  bare,
-  selected,
-}: {
-  bare: boolean;
-  selected: boolean;
-}) => {
-  return [
-    {
-      overflow: "hidden",
-      flexGrow: 1,
-      borderRadius: bare ? cssVar("--border-radius-m") : null,
-      textDecoration: "none",
-      ":hover": {
-        backgroundColor: cssVar("--hovered-background"),
-      },
-      ":active:hover": {
-        backgroundColor: cssVar("--pressed-background"),
-      },
-      "[aria-disabled=true]": {
-        backgroundColor: cssVar("--primary-background"),
-      },
-      "[aria-disabled=true]:active:hover": {
-        backgroundColor: cssVar("--primary-background"),
-      },
-    },
-    selected && {
-      backgroundColor: bare
-        ? cssVar("--light-highlight")
-        : cssVar("--selected-background"),
-      boxShadow: bare ? "" : "inset 1px 1px 2px -1px #0000004a",
-      ":hover": {
-        backgroundColor: cssVar("--hovered-background"),
-      },
-      ":active:hover": {
-        backgroundColor: cssVar("--pressed-background"),
-      },
-    },
-  ];
-};

package/src/JSSComment.tsx

@@ -1,56 +0,0 @@
-import React, { useEffect, useRef } from "react";
-
-/**
- * Injects a real HTML comment node (<!-- ComponentName -->) into the DOM.
- *
- * Renders nothing (null). Uses the React fiber tree to locate the sibling
- * component's first DOM node, then inserts a comment before it.
- * Client-only — no SSR output, no hydration mismatch.
- */
-export function JSSComment({ name }: { name: string }) {
-  const fiberRef = useRef<any>(null);
-
-  // Capture our fiber during render
-  try {
-    const internals = (React as any)
-      .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    fiberRef.current = internals?.ReactCurrentOwner?.current;
-  } catch {}
-
-  useEffect(() => {
-    const fiber = fiberRef.current;
-    if (!fiber) return;
-
-    // Our sibling in the Fragment is the actual component
-    const sibling = fiber.sibling;
-    if (!sibling) return;
-
-    // Walk down the sibling's fiber tree to find its first DOM node
-    const hostNode = findFirstDOMNode(sibling);
-    if (!hostNode?.parentNode) return;
-
-    const comment = document.createComment(` ${name} `);
-    hostNode.parentNode.insertBefore(comment, hostNode);
-
-    return () => {
-      comment.remove();
-    };
-  }, [name]);
-
-  return null;
-}
-
-function findFirstDOMNode(fiber: any): Node | null {
-  let current = fiber;
-  while (current) {
-    if (current.stateNode instanceof Node) {
-      return current.stateNode;
-    }
-    if (current.child) {
-      current = current.child;
-      continue;
-    }
-    break;
-  }
-  return null;
-}

package/src/Link.tsx

@@ -1,110 +0,0 @@
-import React, { ReactNode } from "react";
-
-import { BaseLink, BaseLinkProps } from "./BaseLink";
-import { Text } from "./Text";
-import { IconType } from "./IconType";
-import { Row } from "./Row";
-import { Icon } from "./Icon";
-import { FlexLayoutProps } from "./FlexLayout";
-import { InteractableColor, getGlyphColor, getCSSColor } from "./Interactable";
-import { Size, Align, Gap, Justify, cssVar } from "./jss";
-
-export interface LinkProps extends BaseLinkProps {
-  children?: ReactNode;
-  color: InteractableColor;
-  size?: Size;
-  icon?: IconType;
-  underline?: boolean;
-  iconSize?: Size;
-  iconPosition?: "left" | "right";
-  rowProps?: FlexLayoutProps;
-  align?: Align;
-  gap?: Gap;
-  justify?: Justify;
-  bold?: boolean;
-  inline?: boolean;
-}
-
-export const Link = React.forwardRef(
-  (
-    {
-      children,
-      color,
-      bare,
-      disabled,
-      icon,
-      underline,
-      iconSize = "medium",
-      iconPosition = "left",
-      align = "center",
-      gap = "small",
-      justify = "center",
-      jss,
-      size = "medium",
-      padding = "medium",
-      inline = true,
-      bold,
-      ...otherProps
-    }: LinkProps,
-    ref?: React.Ref<HTMLAnchorElement>
-  ) => {
-    return (
-      <BaseLink
-        {...otherProps}
-        bare={bare}
-        ref={ref}
-        color={color}
-        disabled={disabled}
-        padding={padding}
-        jss={[
-          {
-            borderRadius: cssVar("--border-radius-m"),
-            justifyContent: "center",
-            userSelect: "none",
-            display: inline ? "inline-flex" : "flex",
-            textDecoration: "none",
-          },
-          underline && {
-            textDecorationLine: "underline",
-            textDecorationThickness: "2px",
-            textUnderlineOffset: "2px",
-            textDecorationColor: getCSSColor(color, disabled, bare),
-          },
-          jss,
-        ]}
-      >
-        <Row
-          jss={{
-            display: inline ? "inline-flex" : "flex",
-          }}
-          grow={true}
-          align={align}
-          gap={gap}
-          justify={justify}
-        >
-          {icon && iconPosition === "left" && (
-            <Icon
-              icon={icon}
-              size={iconSize}
-              color={getGlyphColor(color, disabled, bare)}
-            />
-          )}
-          <Text
-            bold={bold}
-            size={size}
-            color={getGlyphColor(color, disabled, bare)}
-          >
-            {children}
-          </Text>
-          {icon && iconPosition === "right" && (
-            <Icon
-              icon={icon}
-              size={iconSize}
-              color={getGlyphColor(color, disabled, bare)}
-            />
-          )}
-        </Row>
-      </BaseLink>
-    );
-  }
-);

package/src/List.tsx

@@ -1,58 +0,0 @@
-import React, { useContext, useMemo } from "react";
-import { BaseList, BaseListProps } from "./BaseList";
-import { useNavigation } from "./useNavigation";
-import { cssVar } from "./jss";
-
-interface ListProps extends BaseListProps {
-  ariaLabel: string;
-  bare?: boolean;
-  autofocus?: boolean;
-  role?: undefined;
-  navigation?: boolean;
-  carded?: boolean;
-}
-
-const ListContext = React.createContext({ bare: false, carded: true });
-
-export function List({
-  ariaLabel,
-  jss,
-  autofocus = false,
-  navigation = true,
-  bare,
-  carded = true,
-  ...otherProps
-}: ListProps) {
-  const rootRef = useNavigation({ autofocus, enabled: navigation });
-  const contextValue = useMemo(() => ({ bare, carded }), [bare, carded]);
-
-  return (
-    <ListContext.Provider value={contextValue}>
-      <BaseList
-        role="grid"
-        aria-label={ariaLabel}
-        ref={rootRef}
-        jss={[
-          { overflow: "hidden" },
-          !bare && {
-            backgroundColor: cssVar("--overlay-background"),
-          },
-          !bare &&
-            !carded && {
-              borderBottom: `1px solid ${cssVar("--divider")}`,
-              borderTop: `1px solid ${cssVar("--divider")}`,
-            },
-          !bare &&
-            carded && {
-              border: `1px solid ${cssVar("--divider")}`,
-              borderRadius: cssVar("--border-radius-l"),
-            },
-          jss,
-        ]}
-        {...otherProps}
-      />
-    </ListContext.Provider>
-  );
-}
-
-export const useListContext = () => useContext(ListContext);

package/src/ListButtonItem.tsx

@@ -1,69 +0,0 @@
-import React from "react";
-
-import { BaseListItem, BaseListItemProps } from "./BaseListItem";
-import {
-  InteractableColor,
-  getGlyphColor,
-  getInteractableListItemJSS,
-} from "./Interactable";
-import { BaseButton } from "./BaseButton";
-import { useListContext } from "./List";
-
-// @ts-ignore
-interface ListButtonItemProps extends BaseListItemProps {
-  color: InteractableColor;
-  onClick: () => void;
-  headline: string;
-  body?: string;
-  disabled?: boolean;
-  selected?: boolean;
-  children?: void;
-}
-
-export const ListButtonItem = React.forwardRef(
-  (
-    {
-      onClick,
-      color = "primary",
-      disabled = false,
-      padding = "medium",
-      jss,
-      gap,
-      selected,
-      ...otherProps
-    }: ListButtonItemProps,
-    ref?: React.Ref<HTMLButtonElement>
-  ) => {
-    const { bare } = useListContext();
-
-    return (
-      <BaseListItem
-        withDivider={!bare}
-        disabled={disabled}
-        padding="none"
-        gap={gap}
-        headlineColor={getGlyphColor(color, disabled, true)}
-        bodyColor={getGlyphColor(color, disabled, true)}
-        selected={selected}
-        aria-selected={selected}
-        {...otherProps}
-        jss={jss}
-      >
-        {({ content }) => (
-          <BaseButton
-            padding={padding}
-            disabled={disabled}
-            animateInteraction={false}
-            bare={true}
-            color={bare ? "primary" : color}
-            ref={ref}
-            jss={getInteractableListItemJSS({ bare, selected })}
-            onClick={onClick}
-          >
-            {content}
-          </BaseButton>
-        )}
-      </BaseListItem>
-    );
-  }
-);

package/src/ListDivider.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-import { BaseView } from "./BaseView";
-
-const jsss = {
-  root: {
-    width: "100%",
-    borderBottom: "1px solid var(--divider)",
-  },
-};
-
-export function ListDivider() {
-  return <BaseView jss={jsss.root} />;
-}

package/src/ListHeaderItem.tsx

@@ -1,45 +0,0 @@
-import React, { ReactNode } from "react";
-import { BaseListItem } from "./BaseListItem";
-import { Position, cssVar } from "./jss";
-import { useListContext } from "./List";
-
-export function ListHeaderItem({
-  highlight,
-  headline,
-  body,
-  withDivider,
-  addOn,
-  addOnPosition,
-}: {
-  highlight?: boolean;
-  headline: string;
-  body?: string;
-  withDivider?: boolean;
-  addOn?: ReactNode;
-  addOnPosition?: Position;
-}) {
-  const { bare } = useListContext();
-
-  return (
-    <BaseListItem
-      headline={headline}
-      headlineColor={highlight ? (bare ? "highlight" : "light") : "primary"}
-      headlineBold={true}
-      body={body}
-      addOn={addOn}
-      addOnPosition={addOnPosition}
-      withDivider={bare ? false : withDivider}
-      jss={
-        bare
-          ? null
-          : {
-              backgroundColor: highlight
-                ? cssVar("--highlight")
-                : cssVar("--secondary-background"),
-            }
-      }
-    >
-      {({ content }) => content}
-    </BaseListItem>
-  );
-}

package/src/ListItem.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-
-import { BaseListItem, BaseListItemProps } from "./BaseListItem";
-import { cssVar } from "./jss";
-import { useListContext } from "./List";
-
-// @ts-ignore
-interface ListItemProps extends BaseListItemProps {
-  headline: string;
-  body?: string;
-  children?: void;
-}
-
-export const ListItem = React.forwardRef(
-  (props: ListItemProps, ref?: React.Ref<HTMLLIElement>) => {
-    const { bare } = useListContext();
-
-    return (
-      <BaseListItem withDivider={!bare} {...props} jss={props.jss} ref={ref}>
-        {({ content }) => content}
-      </BaseListItem>
-    );
-  }
-);

package/src/ListLinkItem.tsx

@@ -1,76 +0,0 @@
-import React from "react";
-
-import { BaseListItem, BaseListItemProps } from "./BaseListItem";
-import {
-  InteractableColor,
-  getGlyphColor,
-  getInteractableListItemJSS,
-} from "./Interactable";
-import { BaseLink } from "./BaseLink";
-import { useListContext } from "./List";
-
-// @ts-ignore
-interface ListLinkItemProps extends BaseListItemProps {
-  color?: InteractableColor;
-  children?: void;
-  onClick?: () => void;
-  href: string;
-  headline: string;
-  body?: string;
-  disabled?: boolean;
-  selected?: boolean;
-  target?: string;
-}
-
-export const ListLinkItem = React.forwardRef(
-  (
-    {
-      onClick,
-      href,
-      disabled = false,
-      padding = "medium",
-      jss,
-      gap,
-      selected,
-      color = "primary",
-      target,
-      ...otherProps
-    }: ListLinkItemProps,
-    ref?: React.Ref<HTMLAnchorElement>
-  ) => {
-    const { bare } = useListContext();
-
-    return (
-      <BaseListItem
-        withDivider={!bare}
-        disabled={disabled}
-        aria-selected={selected}
-        padding="none"
-        gap={gap}
-        headlineColor={getGlyphColor(color, disabled, true)}
-        bodyColor={getGlyphColor(color, disabled, true)}
-        selected={selected}
-        {...otherProps}
-        jss={jss}
-      >
-        {({ content }) => (
-          <BaseLink
-            target={target}
-            padding={padding}
-            aria-current={selected ? "page" : undefined}
-            disabled={disabled}
-            animateInteraction={false}
-            bare={true}
-            color={color}
-            href={href}
-            ref={ref}
-            jss={getInteractableListItemJSS({ bare, selected })}
-            onClick={onClick}
-          >
-            {content}
-          </BaseLink>
-        )}
-      </BaseListItem>
-    );
-  }
-);

package/src/ListSpacer.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import { BaseView } from "./BaseView";
-
-const jsss = {
-  root: {
-    height: "var(--spacing-xl)",
-    backgroundColor: "var(--secondary-background)",
-    width: "100%",
-  },
-};
-
-export function ListSpacer() {
-  return <BaseView jss={jsss.root} />;
-}