@alto-avios/alto-ui 2.4.0 → 3.1.0

package/dist/components/Image/Image.js

@@ -0,0 +1,135 @@
+import { jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import { borderVariants } from "../../utils/border/border.js";
+import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundColor.js";
+import '../../assets/Image.css';const image = "_image_z82es_1";
+const fill = "_fill_z82es_10";
+const contain = "_contain_z82es_14";
+const cover = "_cover_z82es_18";
+const none = "_none_z82es_22";
+const scaleDown = "_scaleDown_z82es_26";
+const styles = {
+  image,
+  fill,
+  contain,
+  cover,
+  none,
+  scaleDown
+};
+const imageVariants = cva(styles.image, {
+  variants: {
+    fit: {
+      contain: styles.contain,
+      cover: styles.cover,
+      fill: styles.fill,
+      none: styles.none,
+      scaleDown: styles.scaleDown,
+      "scale-down": styles.scaleDown
+    }
+  }
+});
+const useImageLoaded = (onLoadProp) => {
+  const [loaded, setLoaded] = useState(false);
+  const ref = useRef(null);
+  const handleLoad = React.useCallback((event) => {
+    if (typeof onLoadProp === "function") {
+      onLoadProp(event);
+    }
+    setLoaded(true);
+  }, [onLoadProp]);
+  useEffect(() => {
+    if (ref.current && ref.current.complete) {
+      setLoaded(true);
+    }
+  });
+  return {
+    ref,
+    loaded,
+    handleLoad
+  };
+};
+const useMergedRef = (internalRef, forwardedRef) => {
+  return React.useMemo(() => {
+    if (!forwardedRef) return internalRef;
+    return (node) => {
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef && "current" in forwardedRef) {
+        forwardedRef.current = node;
+      }
+      internalRef.current = node;
+    };
+  }, [internalRef, forwardedRef]);
+};
+const Image = React.forwardRef(({
+  src,
+  fallbackSrc,
+  onError: onErrorProp,
+  onLoad: onLoadProp,
+  asChild,
+  children,
+  borderRadius,
+  backgroundColor,
+  backgroundColour,
+  fit,
+  aspectRatio,
+  ...props
+}, forwardedRef) => {
+  if (backgroundColour && !backgroundColor) {
+    console.warn("Warning: `backgroundColour` is deprecated and will be removed in a future release. Please use `backgroundColor` instead.");
+  }
+  const resolvedBackgroundColor = backgroundColor ?? backgroundColour;
+  const {
+    ref: internalRef,
+    loaded,
+    handleLoad
+  } = useImageLoaded(onLoadProp);
+  const ref = useMergedRef(internalRef, forwardedRef);
+  const [isError, setError] = useState(!src);
+  if (asChild && !children) {
+    console.error("Image component: Children required when asChild is true");
+  }
+  const handleError = React.useCallback((e) => {
+    if (fallbackSrc) {
+      setError(true);
+    }
+    if (typeof onErrorProp === "function") {
+      onErrorProp(e);
+    }
+  }, [fallbackSrc, onErrorProp]);
+  const imgProps = {
+    src: isError ? fallbackSrc : src,
+    className: `
+    ${borderVariants({
+      borderRadius
+    })}
+    ${backgroundColorVariants({
+      backgroundColor: resolvedBackgroundColor
+    })}
+    ${imageVariants({
+      fit
+    })}`,
+    onError: handleError,
+    onLoad: handleLoad,
+    ref,
+    "data-loaded": loaded,
+    style: {
+      aspectRatio
+    },
+    ...props
+  };
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children, {
+      ...imgProps,
+      ...children.props
+    });
+  }
+  return /* @__PURE__ */ jsx("img", { ...imgProps });
+});
+Image.displayName = "Image";
+export {
+  Image,
+  Image as default
+};
+//# sourceMappingURL=Image.js.map

package/dist/components/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Image/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Image';

package/dist/components/Image/index.js

@@ -0,0 +1,5 @@
+import { Image } from "./Image.js";
+export {
+  Image as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Link/Link.d.ts

@@ -1,69 +1,67 @@
 import { LinkProps as AriaLinkProps } from 'react-aria-components';
 import { IconProps } from '../Icon/Icon';
 export interface LinkProps extends AriaLinkProps {
+    /**
+     * The children of the component. A function may be provided to alter the children based on component state.
+     */
+    children?: React.ReactNode | string;
     /**
      * What the size of the Link is
      * @default 'md'
      */
     size?: 'xs' | 'sm' | 'md' | 'lg';
-    /**
-     * Whether the icon should be at the end of the Link
-     * @default true
-     */
-    iconEnd?: boolean;
-    /**
-     * The text to display in the Link
-     */
-    linkText?: string;
     /**
      * Whether the Link should be underlined
      * @default false
      */
     underline?: boolean;
     /**
-     * The URL the Link will navigate to
+     * Whether the link is disabled.
+     * @default false
      */
-    href?: string;
+    isDisabled?: boolean;
     /**
-     * The target attribute for the Link
-     * @default '_self'
+     * Whether an icon should display at the end of Link and icon properties
+     * @default { iconName: 'arrow-right' }
      */
-    target?: string;
+    iconEndProps?: IconProps | false;
     /**
-     * The relationship between the linked resource and the current page. See MDN.
+     * Whether an icon should display at the start of the Link and icon properties
      */
-    rel?: string;
+    iconStartProps?: IconProps;
     /**
-     * Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
-     * @default false
+     * The URL the Link will navigate to
      */
-    download?: boolean | string;
+    href?: string;
     /**
-     * Whether the link is disabled.
-     * @default false
+     * The target attribute for the Link
+     * @default '_self'
      */
-    isDisabled?: boolean;
+    target?: string;
     /**
-     * Whether the element should receive focus on render.
-     * @default false
+     * Aria label applied when target="_blank"
+     * @default "open in new tab"
      */
-    autoFocus?: boolean;
+    ariaLabelExternal?: string;
     /**
-     * A space-separated list of URLs to ping when the link is followed. See MDN.
+     * 	The focus style of the button
      */
-    ping?: string;
+    focusStyle?: 'default' | 'white';
     /**
-     * The children of the component. A function may be provided to alter the children based on component state.
+     * Whether an icon should display at the End of the Link
+     * @deprecated Use iconEndProps instead
      */
-    children?: React.ReactNode;
+    iconEnd?: boolean;
     /**
-     * 	The focus style of the button
+     * Whether an icon should display at the End of the Link
+     * @deprecated Use iconEndProps instead
      */
-    focusStyle?: 'default' | 'white';
+    iconProps?: IconProps;
     /**
-     * Whether an icon should display at the start of the TextField
+     * The text to display in the Link
+     * @deprecated Use children instead
      */
-    iconProps?: IconProps;
+    linkText?: string;
 }
-declare const Link: ({ size, iconEnd, underline, iconProps, linkText, href, target, rel, download, isDisabled, autoFocus, ping, focusStyle, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+declare const Link: ({ size, underline, iconStartProps, iconEndProps, iconProps, linkText, href, target, focusStyle, children, ariaLabelExternal, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 export default Link;

package/dist/components/Link/Link.js

@@ -3,21 +3,19 @@ import { Icon } from "../Icon/Icon.js";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { Link as Link$1 } from "react-aria-components";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/Link.css';const link$1 = "_link_4ndec_1";
-const xs = "_xs_4ndec_9";
-const sm = "_sm_4ndec_15";
-const md = "_md_4ndec_21";
-const lg = "_lg_4ndec_27";
-const underline = "_underline_4ndec_58";
-const iconEnd = "_iconEnd_4ndec_75";
+import '../../assets/Link.css';const link$1 = "_link_jskyb_1";
+const xs = "_xs_jskyb_12";
+const sm = "_sm_jskyb_18";
+const md = "_md_jskyb_24";
+const lg = "_lg_jskyb_30";
+const underline = "_underline_jskyb_61";
 const styles = {
   link: link$1,
   xs,
   sm,
   md,
   lg,
-  underline,
-  iconEnd
+  underline
 };
 const link = cva(styles.link, {
   variants: {
@@ -34,41 +32,55 @@ const link = cva(styles.link, {
     iconEnd: {
       true: styles.iconEnd,
       false: ""
+    },
+    iconStart: {
+      true: styles.iconStart,
+      false: ""
     }
   },
   defaultVariants: {
     size: "md",
-    underline: false,
-    iconEnd: true
+    underline: false
   }
 });
 const Link = ({
   size = "md",
-  iconEnd: iconEnd2 = true,
   underline: underline2 = true,
-  iconProps = {
+  iconStartProps,
+  iconEndProps = {
     iconName: "arrow-right"
   },
+  iconProps,
+  // deprecated
   linkText,
   href,
   target = "_self",
-  rel,
-  download = false,
-  isDisabled = false,
-  autoFocus = false,
-  ping,
   focusStyle = "default",
+  children,
+  ariaLabelExternal = "open in new tab",
   ...props
 }) => {
+  const finalIconEndProps = iconProps ?? // Use deprecated iconProps if provided
+  (iconEndProps === false ? void 0 : iconEndProps ?? {
+    iconName: "arrow-right"
+  });
+  const externalLinkProps = target === "_blank" ? {
+    rel: "noopener noreferrer",
+    "aria-label": ariaLabelExternal
+  } : {};
   return /* @__PURE__ */ jsxs(Link$1, { className: `${link({
     size,
-    iconEnd: iconEnd2,
     underline: underline2
   })} ${focusStyleVariants({
     focusStyle
-  })}`, href, target, rel, download, isDisabled, autoFocus, ping, ...props, children: [
-    linkText,
-    iconEnd2 && /* @__PURE__ */ jsx(Icon, { ...iconProps })
+  })}`, href, target, ...externalLinkProps, ...props, children: [
+    iconStartProps && /* @__PURE__ */ jsx(Icon, { className: link({
+      iconStart: !!iconStartProps
+    }), ...iconStartProps }),
+    children || linkText,
+    finalIconEndProps && /* @__PURE__ */ jsx(Icon, { className: link({
+      iconEnd: !!finalIconEndProps
+    }), ...finalIconEndProps })
   ] });
 };
 export {

package/dist/components/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/NumberField/NumberField.d.ts

@@ -1,9 +1,6 @@
-import { ValidationResult, NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
-export interface NumberFieldProps extends AriaNumberFieldProps {
-    /**
-     * The label for the NumberField
-     */
-    label?: string;
+import { NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
+import { FieldProps } from '../_base/Field';
+export interface NumberFieldProps extends FieldProps<AriaNumberFieldProps> {
     /**
      * The label for the increment button
      * @default "Increase"
@@ -14,10 +11,6 @@ export interface NumberFieldProps extends AriaNumberFieldProps {
      * @default "Decrease"
      */
     labelDecrement?: string;
-    /**
-     * The description for the NumberField
-     */
-    description?: string;
     /**
      * The minimum value for the NumberField
      *
@@ -27,29 +20,6 @@ export interface NumberFieldProps extends AriaNumberFieldProps {
      * The maximum value for the NumberField
      */
     maxValue?: number;
-    /**
-     * Whether the NumberField is disabled
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * The error message for the NumberField
-     */
-    errorMessage?: string | ((validation: ValidationResult) => string);
-    /**
-     * The default value for the NumberField
-     */
-    defaultValue?: number;
-    /**
-     * Whether the NumberField is invalid
-     * @default false
-     */
-    isInvalid?: boolean;
-    /**
-     * Whether the NumberField is required
-     * @default false
-     */
-    isRequired?: boolean;
 }
-export declare const NumberField: ({ label, labelIncrement, labelDecrement, description, defaultValue, minValue, maxValue, isInvalid, isDisabled, isRequired, errorMessage, ...props }: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberField: ({ labelIncrement, labelDecrement, minValue, maxValue, isInvalid, isDisabled, ...props }: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default NumberField;

package/dist/components/NumberField/NumberField.js

@@ -1,12 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberField as NumberField$1, Group, Button, Input } from "react-aria-components";
-import { FieldHeader } from "../FieldHeader/FieldHeader.js";
 import { Icon } from "../Icon/Icon.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
-import '../../assets/NumberField.css';const numberField = "_numberField_htvlg_1";
-const numberFieldGroup = "_numberFieldGroup_htvlg_6";
-const numberFieldInput = "_numberFieldInput_htvlg_59";
-const numberFieldButton = "_numberFieldButton_htvlg_60";
+import { Field } from "../_base/Field/Field.js";
+import '../../assets/NumberField.css';const numberField = "_numberField_1knmk_1";
+const numberFieldGroup = "_numberFieldGroup_1knmk_6";
+const numberFieldInput = "_numberFieldInput_1knmk_59";
+const numberFieldButton = "_numberFieldButton_1knmk_60";
 const styles = {
   numberField,
   numberFieldGroup,
@@ -14,27 +14,19 @@ const styles = {
   numberFieldButton
 };
 const NumberField = ({
-  label,
   labelIncrement = "Increase",
   labelDecrement = "Decrease",
-  description,
-  defaultValue,
   minValue,
   maxValue,
   isInvalid = false,
   isDisabled = false,
-  isRequired = false,
-  errorMessage,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(NumberField$1, { className: styles.numberField, defaultValue, minValue, maxValue, isInvalid, isDisabled, ...props, children: [
-    label ? /* @__PURE__ */ jsx(FieldHeader, { label, description, isInvalid, isRequired, errorMessage }) : null,
-    /* @__PURE__ */ jsxs(Group, { className: styles.numberFieldGroup, children: [
-      /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", label: labelDecrement, children: /* @__PURE__ */ jsx(Button, { className: styles.numberFieldButton, slot: "decrement", children: /* @__PURE__ */ jsx(Icon, { iconName: "minus" }) }) }),
-      /* @__PURE__ */ jsx(Input, { className: styles.numberFieldInput }),
-      /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", label: labelIncrement, children: /* @__PURE__ */ jsx(Button, { className: styles.numberFieldButton, slot: "increment", children: /* @__PURE__ */ jsx(Icon, { iconName: "plus" }) }) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx(Field, { as: NumberField$1, className: styles.numberField, minValue, maxValue, isInvalid, isDisabled, ...props, children: /* @__PURE__ */ jsxs(Group, { className: styles.numberFieldGroup, children: [
+    /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", label: labelDecrement, children: /* @__PURE__ */ jsx(Button, { className: styles.numberFieldButton, slot: "decrement", children: /* @__PURE__ */ jsx(Icon, { iconName: "minus" }) }) }),
+    /* @__PURE__ */ jsx(Input, { className: styles.numberFieldInput }),
+    /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", label: labelIncrement, children: /* @__PURE__ */ jsx(Button, { className: styles.numberFieldButton, slot: "increment", children: /* @__PURE__ */ jsx(Icon, { iconName: "plus" }) }) })
+  ] }) });
 };
 export {
   NumberField,

package/dist/components/NumberField/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NumberField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Paragraph/Paragraph.d.ts

@@ -1,12 +1,11 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { fgColorVariants } from '../../utils/fgColour/fgColor';
+import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
 declare const paragraph: (props?: ({
     size?: "lg" | "sm" | "xs" | "md" | null | undefined;
-    textAlign?: "start" | "center" | "end" | null | undefined;
+    textAlign?: "end" | "start" | "center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ParagraphVariants = VariantProps<typeof paragraph>;
-type FgColorVariants = VariantProps<typeof fgColorVariants>;
 type ParagraphSize = 'xs' | 'sm' | 'md' | 'lg';
 export interface ParagraphProps extends ParagraphVariants {
     children: React.ReactNode;
@@ -19,12 +18,17 @@ export interface ParagraphProps extends ParagraphVariants {
      * The foreground color of the paragraph
      * @default "secondary"
      */
-    fgColor?: FgColorVariants['fgColor'];
+    foregroundColor?: ForegroundVariants['foregroundColor'];
+    /**
+     * The foreground color of the paragraph
+     * @deprecated Use `foregroundColor` instead
+     */
+    fgColor?: ForegroundVariants['foregroundColor'];
     /**
      * The text alignment of the paragraph
      * @default "start"
      */
     textAlign?: 'start' | 'center' | 'end';
 }
-export declare const Paragraph: ({ children, size, fgColor, textAlign, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Paragraph: ({ children, size, foregroundColor, fgColor, textAlign, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
 export default Paragraph;

package/dist/components/Paragraph/Paragraph.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import { fgColorVariants } from "../../utils/fgColour/fgColor.js";
+import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
 import '../../assets/Paragraph.css';const paragraph$1 = "_paragraph_odu3c_1";
 const xs = "_xs_odu3c_9";
 const sm = "_sm_odu3c_15";
@@ -41,15 +41,20 @@ const paragraph = cva(styles.paragraph, {
 const Paragraph = ({
   children,
   size = "md",
-  fgColor = "secondary",
+  foregroundColor = "secondary",
+  fgColor,
   textAlign = "start",
   ...props
 }) => {
+  if (fgColor) {
+    console.warn("The `fgColor` prop has been deprecated. Please use `foregroundColor` instead.");
+  }
+  const resolvedFontColor = fgColor ?? foregroundColor ?? "secondary";
   return /* @__PURE__ */ jsx("p", { className: `${paragraph({
     size,
     textAlign
-  })} ${fgColorVariants({
-    fgColor
+  })} ${foregroundColorVariants({
+    foregroundColor: resolvedFontColor
   })}`, ...props, children });
 };
 export {

package/dist/components/Paragraph/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Paragraph.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/PasswordField/PasswordField.d.ts

@@ -0,0 +1,30 @@
+import { FieldProps } from '../_base/Field';
+import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+type PasswordStrengthValidation = {
+    message: string;
+    validation: (value?: string) => boolean;
+};
+export interface PasswordFieldProps extends FieldProps<AriaTextFieldProps> {
+    /**
+     * Whether the password input value revealed or not.
+     */
+    isVisible?: boolean;
+    /**
+     * The strength validations to be applied to the password input value.
+     */
+    strengthValidations?: PasswordStrengthValidation[];
+    /**
+     * Tooltip label to show password
+     */
+    tooltipLabelShowPassword?: string;
+    /**
+     * Tooltip label to hide password
+     */
+    tooltipLabelHidePassword?: string;
+    /**
+     * Label for the password requirements.
+     */
+    requirementsLabel?: string;
+}
+export declare const PasswordField: ({ tooltipLabelShowPassword, tooltipLabelHidePassword, requirementsLabel, ...props }: PasswordFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default PasswordField;