aidos-ui 4.0.4 → 4.0.5

package/src/Text.tsx

@@ -1,111 +0,0 @@
-import React, { ReactNode } from "react";
-import {
-  JSS,
-  Size,
-  TextColor,
-  cssVar,
-  getTextColor,
-  toClassnames,
-} 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 type Display = "inline" | "block";
-
-export interface TextProps {
-  children: ReactNode;
-  color?: TextColor;
-  size?: Size;
-  bold?: boolean;
-  ellipsis?: boolean | "default";
-  align?: "center" | "none";
-  type?: TextType;
-  grow?: boolean;
-  jss?: JSS;
-  id?: string;
-  htmlFor?: string;
-}
-
-export type TextType =
-  | "label"
-  | "span"
-  | "p"
-  | "h1"
-  | "h2"
-  | "h3"
-  | "h4"
-  | "li";
-
-export function Text({
-  children,
-  color = "primary",
-  size = "medium",
-  align = "none",
-  bold = false,
-  ellipsis = "default",
-  grow,
-  type: Type = "span",
-  jss,
-  id,
-  htmlFor,
-}: TextProps) {
-  if (ellipsis === "default") {
-    ellipsis = Type === "span" || Type === "label";
-  }
-
-  const className = toClassnames([
-    getTextColor(color),
-    { fontSize: fontSize[size], padding: 0, margin: 0 },
-    bold && { fontWeight: "bold" },
-    align === "center" && { textAlign: "center" },
-    ellipsis && {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-    },
-    grow && { flexGrow: 1 },
-    jss,
-  ]);
-
-  return (
-    <Type id={id} className={className} htmlFor={htmlFor}>
-      {children}
-    </Type>
-  );
-}
-
-export function Label({ size = "medium", type = "label", ...rest }: TextProps) {
-  return <Text size={size} type={type} {...rest} />;
-}
-
-export function Span({ size = "medium", type = "span", ...rest }: TextProps) {
-  return <Text size={size} type={type} {...rest} />;
-}
-
-export function P({ size = "medium", type = "p", ...rest }: TextProps) {
-  return <Text size={size} type={type} {...rest} />;
-}
-
-export function H1({ size = "xxlarge", type = "h1", ...rest }: TextProps) {
-  return <Text size={size} type={type} {...rest} />;
-}
-
-export function H2({ size = "xlarge", type = "h2", ...rest }: TextProps) {
-  return <Text size={size} type={type} {...rest} />;
-}
-
-export function H3({ size = "large", type = "h3", ...rest }: TextProps) {
-  return <Text size={size} type={type} {...rest} />;
-}
-
-export function Li({ size = "medium", type = "li", ...rest }: TextProps) {
-  return <Text size={size} type={type} {...rest} />;
-}

package/src/TextArea.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import { JSS, Padding, cssVar, getPadding, toClassnames } from "./jss";
-
-export interface TextAreaProps
-  extends React.InputHTMLAttributes<HTMLTextAreaElement> {
-  jss?: JSS;
-  onValueChange?: (value: string) => void;
-  value?: string;
-  className?: undefined;
-  size?: undefined;
-  padding?: Padding;
-}
-
-export const TextArea = React.forwardRef(
-  (
-    {
-      jss,
-      onValueChange,
-      value,
-      onChange,
-      padding = "medium",
-      ...otherProps
-    }: TextAreaProps,
-    ref?: React.Ref<HTMLTextAreaElement>
-  ) => {
-    return (
-      <textarea
-        {...otherProps}
-        ref={ref}
-        className={toClassnames([
-          {
-            flexGrow: 1,
-            color: cssVar("--primary-text"),
-            outline: "none",
-            fontSize: 20,
-            lineHeight: 24 / 20,
-            backgroundColor: cssVar("--overlay-background"),
-            border: `1px solid ${cssVar("--divider")}`,
-            borderRadius: cssVar("--border-radius-m"),
-            "::placeholder": {
-              color: cssVar("--subtle-text"),
-            },
-            ":focus-visible": {
-              outline: `2px solid ${cssVar("--highlight")}`,
-              outlineOffset: -2,
-            },
-          },
-          getPadding(padding),
-          jss,
-        ])}
-        value={value}
-        onChange={
-          onValueChange ? (e) => onValueChange(e.target.value) : undefined
-        }
-      />
-    );
-  }
-);

package/src/TextInput.tsx

@@ -1,123 +0,0 @@
-import React, { ReactNode } from "react";
-import { BaseInput, BaseInputProps } from "./BaseInput";
-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 Omit<BaseInputProps, "size"> {
-  onValueChange?: (value: string) => void;
-  jssRoot?: JSS;
-  addOn?: ReactNode;
-  addOnPosition?: "start" | "end";
-  gap?: Gap;
-  onChange?: undefined;
-  padding?: Padding;
-  bare?: boolean;
-  size?: Size;
-}
-
-export const TextInput = React.forwardRef(
-  (
-    {
-      value,
-      onValueChange,
-      jssRoot,
-      jss,
-      addOn,
-      gap = "small",
-      addOnPosition = "start",
-      padding = "medium",
-      bare,
-      size = "medium",
-      ...inputProps
-    }: TextInputProps,
-    ref?: React.Ref<HTMLInputElement>
-  ) => {
-    return (
-      <Row
-        gap={gap}
-        jss={[
-          {
-            borderRadius: cssVar("--border-radius-m"),
-            overflow: "hidden",
-          },
-          bare
-            ? {
-                backgroundColor: "inherit",
-                ":has(:focus-visible)": {
-                  backgroundColor: cssVar("--light-highlight"),
-                },
-              }
-            : {
-                border: `1px solid ${cssVar("--divider")}`,
-                backgroundColor: cssVar("--overlay-background"),
-                ":has(:focus-visible)": {
-                  outline: `2px solid ${cssVar("--highlight")}`,
-                  outlineOffset: -2,
-                },
-              },
-          jssRoot,
-        ]}
-      >
-        {addOnPosition === "start" && addOn && (
-          <Column
-            justify="center"
-            align="center"
-            jss={[getPadding(padding), { paddingRight: 0 }]}
-          >
-            {addOn}
-          </Column>
-        )}
-        <BaseInput
-          {...inputProps}
-          ref={ref}
-          value={value}
-          onChange={
-            onValueChange ? (e) => onValueChange(e.target.value) : undefined
-          }
-          jss={[
-            {
-              minWidth: 0,
-              flexGrow: 1,
-              backgroundColor: "inherit",
-              color: cssVar("--primary-text"),
-              outline: "none",
-              border: "none",
-              fontSize: fontSize[size],
-              lineHeight: 1.2,
-              "::placeholder": {
-                color: cssVar("--subtle-text"),
-              },
-              ":disabled": {
-                color: cssVar("--subtle-text"),
-              },
-            },
-            getPadding(padding),
-            addOn && addOnPosition === "start" ? { paddingLeft: 0 } : null,
-            addOn && addOnPosition === "end" ? { paddingRight: 0 } : null,
-            jss,
-          ]}
-        />
-        {addOnPosition === "end" && addOn && (
-          <Column
-            justify="center"
-            align="center"
-            jss={[getPadding(padding), { paddingLeft: 0 }]}
-          >
-            {addOn}
-          </Column>
-        )}
-      </Row>
-    );
-  }
-);

package/src/TextInputWithState.tsx

@@ -1,32 +0,0 @@
-import React, { useCallback } from "react";
-
-import { TextInput } from "./TextInput";
-import { BaseInputProps } from "./BaseInput";
-import { useState } from "react";
-
-export interface TextInputWithStateProps extends BaseInputProps {
-  onValueChange?: (value: string) => void;
-  valueRef: React.MutableRefObject<string>;
-  onChange?: undefined;
-}
-
-export function TextInputWithState({
-  valueRef,
-  onValueChange: externalOnChange,
-  ...otherProps
-}: TextInputWithStateProps) {
-  const [value, setValue] = useState(valueRef.current);
-
-  const onValueChange = useCallback(
-    (value) => {
-      valueRef.current = value;
-      setValue(value);
-      externalOnChange && externalOnChange(value);
-    },
-    [setValue, externalOnChange, valueRef]
-  );
-
-  return (
-    <TextInput {...otherProps} value={value} onValueChange={onValueChange} />
-  );
-}

package/src/TextPairing.tsx

@@ -1,115 +0,0 @@
-import React, { ReactNode } from "react";
-
-import { Text, TextType } from "./Text";
-import { Row } from "./Row";
-import { BaseView } from "./BaseView";
-import { Column } from "./Column";
-import {
-  TextColor,
-  Size,
-  Position,
-  Gap,
-  Padding,
-  Align,
-  cssVar,
-  JSS,
-} from "./jss";
-
-export interface TextPairingProps {
-  headline: ReactNode;
-  body?: ReactNode;
-  headlineColor?: TextColor;
-  headlineSize?: Size;
-  headlineAddOn?: ReactNode;
-  bodyColor?: TextColor;
-  bodySize?: Size;
-  addOn?: ReactNode;
-  addOnPosition?: Position;
-  gap?: Gap;
-  padding?: Padding;
-  align?: Align;
-  grow?: boolean;
-  shrink?: boolean;
-  headlineBold?: boolean;
-  jss?: JSS;
-}
-
-export function TextPairing({
-  headline,
-  body,
-  headlineColor = "primary",
-  headlineSize = "medium",
-  headlineAddOn,
-  bodyColor = "secondary",
-  bodySize = "medium",
-  addOn,
-  addOnPosition = "start",
-  gap = "small",
-  align = "stretch",
-  grow,
-  shrink,
-  headlineBold,
-  padding,
-  jss,
-}: TextPairingProps) {
-  const textElement = (
-    <Column
-      grow={grow}
-      shrink={shrink}
-      padding={addOn ? undefined : padding}
-      align={align}
-      jss={[
-        {
-          overflow: "hidden",
-        },
-        jss,
-      ]}
-    >
-      <Row
-        align="center"
-        jss={{
-          textAlign: "start",
-        }}
-      >
-        <Text bold={headlineBold} color={headlineColor} size={headlineSize}>
-          {headline}
-        </Text>
-        {headlineAddOn && <BaseView>{headlineAddOn}</BaseView>}
-      </Row>
-      {body && (
-        <Row
-          align="center"
-          jss={{
-            marginTop: cssVar("--spacing-xs"),
-            textAlign: "start",
-          }}
-        >
-          <Text ellipsis={true} color={bodyColor} size={bodySize}>
-            {body}
-          </Text>
-        </Row>
-      )}
-    </Column>
-  );
-
-  if (addOn) {
-    return (
-      <Row
-        grow={grow}
-        shrink={shrink}
-        gap={gap}
-        align="center"
-        padding={padding}
-        jss={{
-          overflow: "hidden",
-        }}
-      >
-        {addOnPosition === "start" && addOn}
-        {textElement}
-        {addOnPosition === "end" && addOn}
-      </Row>
-    );
-  }
-
-  return textElement;
-}

package/src/TimeInput.tsx

@@ -1,109 +0,0 @@
-import React, { ReactNode } from "react";
-import { BaseInput, BaseInputProps } from "./BaseInput";
-import { Row } from "./Row";
-import { Gap, Padding, cssVar } from "./jss";
-
-export interface TimeInputProps extends BaseInputProps {
-  onTimeChange: (date: Date) => void;
-  time: Date;
-  gap?: Gap;
-  padding?: Padding;
-  addOn?: ReactNode;
-  addOnPosition?: "start" | "end";
-  onChange?: undefined;
-  bare?: boolean;
-}
-
-export const timeFormatter = Intl.DateTimeFormat("en-UK", {
-  hour: "2-digit",
-  minute: "2-digit",
-});
-
-function TimeInputInternal(
-  {
-    time: date,
-    onTimeChange: onDateChange,
-    jss,
-    addOn,
-    padding = "small",
-    gap = "none",
-    addOnPosition = "start",
-    bare,
-    ...inputProps
-  }: TimeInputProps,
-  ref?: React.Ref<HTMLInputElement>
-) {
-  return (
-    <Row
-      padding={padding}
-      gap={gap}
-      align="center"
-      jss={[
-        {
-          borderRadius: cssVar("--border-radius-m"),
-          overflow: "hidden",
-        },
-        bare
-          ? {
-              backgroundColor: "inherit",
-              ":has(:focus-visible)": {
-                backgroundColor: cssVar("--light-highlight"),
-              },
-            }
-          : {
-              border: `1px solid ${cssVar("--divider")}`,
-              backgroundColor: cssVar("--overlay-background"),
-              ":has(:focus-visible)": {
-                outline: `2px solid ${cssVar("--highlight")}`,
-                outlineOffset: -2,
-              },
-            },
-      ]}
-    >
-      {addOnPosition === "start" && addOn}
-      <BaseInput
-        {...inputProps}
-        type="time"
-        ref={ref}
-        value={timeFormatter.format(date)}
-        onChange={(e) => {
-          const value = e.target.value;
-          const [hour, minute] = value.split(":");
-          onDateChange(
-            new Date(
-              date.getFullYear(),
-              date.getMonth(),
-              date.getDate(),
-              parseInt(hour),
-              parseInt(minute)
-            )
-          );
-        }}
-        jss={[
-          {
-            flexGrow: 1,
-            backgroundColor: "inherit",
-            color: "var(--primary-text)",
-            outline: "none",
-            border: "none",
-            fontSize: 20,
-            lineHeight: 24 / 20,
-            "::placeholder": {
-              color: "var(--subtle-text);",
-            },
-            ":disabled": {
-              color: "var(--subtle-text);",
-            },
-            "::-webkit-calendar-picker-indicator": {
-              backgroundColor: "none",
-            },
-          },
-          jss,
-        ]}
-      />
-      {addOnPosition === "end" && addOn}
-    </Row>
-  );
-}
-
-export const TimeInput = React.forwardRef(TimeInputInternal);

package/src/Tooltip.tsx

@@ -1,109 +0,0 @@
-import React, { useRef, useState } from "react";
-
-import { BaseView } from "./BaseView";
-import { useRefEffect } from "./useRefEffect";
-import { Text } from "./Text";
-import { JSS, cssVar, toClassnames } from "./jss";
-
-const styles: { [key: string]: JSS } = {
-  tooltip: {
-    top: "-100%",
-    transform: "translateY(50%)",
-    backgroundColor: cssVar("--primary-background"),
-    padding: `${cssVar("--spacing-s")} ${cssVar("--spacing-m")}`,
-    borderRadius: cssVar("--border-radius-m"),
-    border: `1px solid ${cssVar("--divider")}`,
-    boxShadow: cssVar("--shadow-md"),
-    overflow: "hidden",
-    animation: "popoverFadeIn 0.15s ease-out",
-  },
-};
-
-interface TooltipProps {
-  content: string;
-  jss?: JSS;
-  className?: undefined;
-  tag?: keyof HTMLElementTagNameMap;
-  children: React.JSX.Element;
-}
-
-export function Tooltip({ content, jss, tag, children }: TooltipProps) {
-  const [tooltip, setTooltip] = useState<React.JSX.Element>(null);
-  const dialogRef = useRef(null);
-  const focusTrapRoot = useRefEffect((root: HTMLDialogElement) => {
-    dialogRef.current = root;
-
-    const keydown = (e) => {
-      if (e.key === "Escape") {
-        dialogRef.current?.close();
-      } else if (e.key === "Tab") {
-        dialogRef.current?.close();
-      }
-    };
-
-    const click = () => {
-      dialogRef.current?.close();
-    };
-
-    window.addEventListener("keydown", keydown);
-    window.addEventListener("click", click);
-
-    const activeElement = document.activeElement;
-    root.show();
-    // @ts-ignore
-    activeElement.focus();
-
-    return () => {
-      window.removeEventListener("keydown", keydown);
-      window.removeEventListener("click", click);
-    };
-  });
-
-  const toggle = () => {
-    if (tooltip == null) {
-      setTooltip(
-        <dialog
-          ref={(ref: null | HTMLDialogElement) => {
-            dialogRef.current = ref;
-            focusTrapRoot(ref);
-          }}
-          className={toClassnames(styles.tooltip)}
-          onClose={() => {
-            setTooltip(null);
-          }}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-        >
-          <Text size="medium" color="secondary">
-            {content}
-          </Text>
-        </dialog>
-      );
-    } else {
-      setTooltip(null);
-    }
-  };
-
-  return (
-    <BaseView
-      tag={tag}
-      relative={true}
-      jss={[{ display: "inline-block" }, jss]}
-      onMouseEnter={() => {
-        if (tooltip == null) {
-          toggle();
-        }
-      }}
-      onMouseLeave={() => {
-        if (tooltip != null) {
-          toggle();
-        }
-      }}
-    >
-      {children}
-      {tooltip}
-    </BaseView>
-  );
-}