@alto-avios/alto-ui 3.8.0 → 4.0.0

package/dist/components/IconButton/IconButton.js

@@ -1,141 +1,31 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { c as cva } from "../../index-DdUYounA.js";
-import { forwardRef, useRef, useState, useEffect } from "react";
-import { Button } from "react-aria-components";
-import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Button } from "../Button/Button.js";
 import { Icon } from "../Icon/Icon.js";
-import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
+import { useObjectRef } from "@react-aria/utils";
 import { Tooltip } from "../Tooltip/Tooltip.js";
-import '../../assets/IconButton.css';const iconButton$1 = "_iconButton_kb1oz_1";
-const sm = "_sm_kb1oz_24";
-const md = "_md_kb1oz_30";
-const lg = "_lg_kb1oz_36";
-const accentPrimary = "_accentPrimary_kb1oz_46";
-const accentSecondary = "_accentSecondary_kb1oz_69";
-const accentTertiary = "_accentTertiary_kb1oz_98";
-const accentQuaternary = "_accentQuaternary_kb1oz_127";
-const criticalPrimary = "_criticalPrimary_kb1oz_151";
-const criticalSecondary = "_criticalSecondary_kb1oz_175";
-const criticalTertiary = "_criticalTertiary_kb1oz_204";
-const criticalQuaternary = "_criticalQuaternary_kb1oz_229";
-const neutralPrimary = "_neutralPrimary_kb1oz_254";
-const neutralSecondary = "_neutralSecondary_kb1oz_278";
-const neutralTertiary = "_neutralTertiary_kb1oz_305";
-const neutralQuaternary = "_neutralQuaternary_kb1oz_330";
-const whitePrimary = "_whitePrimary_kb1oz_356";
-const whiteSecondary = "_whiteSecondary_kb1oz_385";
-const whiteTertiary = "_whiteTertiary_kb1oz_416";
-const whiteQuaternary = "_whiteQuaternary_kb1oz_445";
-const styles = {
-  iconButton: iconButton$1,
-  sm,
-  md,
-  lg,
-  accentPrimary,
-  accentSecondary,
-  accentTertiary,
-  accentQuaternary,
-  criticalPrimary,
-  criticalSecondary,
-  criticalTertiary,
-  criticalQuaternary,
-  neutralPrimary,
-  neutralSecondary,
-  neutralTertiary,
-  neutralQuaternary,
-  whitePrimary,
-  whiteSecondary,
-  whiteTertiary,
-  whiteQuaternary
-};
-const iconButton = cva(styles.iconButton, {
-  variants: {
-    size: {
-      sm: styles.sm,
-      md: styles.md,
-      lg: styles.lg
-    },
-    accent: {
-      primary: styles.accentPrimary,
-      secondary: styles.accentSecondary,
-      tertiary: styles.accentTertiary,
-      quaternary: styles.accentQuaternary
-    },
-    critical: {
-      primary: styles.criticalPrimary,
-      secondary: styles.criticalSecondary,
-      tertiary: styles.criticalTertiary,
-      quaternary: styles.criticalQuaternary
-    },
-    neutral: {
-      primary: styles.neutralPrimary,
-      secondary: styles.neutralSecondary,
-      tertiary: styles.neutralTertiary,
-      quaternary: styles.neutralQuaternary
-    },
-    white: {
-      primary: styles.whitePrimary,
-      secondary: styles.whiteSecondary,
-      tertiary: styles.whiteTertiary,
-      quaternary: styles.whiteQuaternary
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-const IconButton = forwardRef(({
-  styleType,
-  styleVariant,
-  emphasis = "primary",
-  size = "md",
-  isLoading = false,
+const IconButton = forwardRef(function IconButton2({
   iconProps = {
     iconName: "circle"
   },
-  onClick,
-  form,
-  formAction,
-  formEncType,
-  formMethod,
-  formNoValidate,
-  formTarget,
-  name,
-  value,
-  isDisabled,
-  autoFocus,
-  type,
-  focusStyle = "default",
-  slot,
-  tooltipLabel = "",
+  tooltipLabel,
   tooltipPlacement = "top",
   ...props
-}, ref) => {
-  const buttonRef = useRef(null);
-  const [buttonWidth, setButtonWidth] = useState(null);
-  useEffect(() => {
-    if (buttonRef.current) {
-      setButtonWidth(buttonRef.current.offsetWidth);
-    }
-  }, [isLoading, size]);
-  const resolvedStyleVariant = styleVariant ?? styleType ?? "accent";
-  const buttonContent = /* @__PURE__ */ jsxs(Button, { className: `${iconButton({
-    size,
-    [resolvedStyleVariant]: emphasis
-  })} ${focusStyleVariants({
-    focusStyle
-  })}`, ref: ref || buttonRef, onPress: onClick, form, formAction, formEncType, formMethod, formNoValidate, formTarget, name, value, isDisabled, autoFocus, type, "aria-label": tooltipLabel ? void 0 : isLoading ? "Loading Spinner" : "Icon", style: {
-    width: isLoading && buttonWidth ? `${buttonWidth}px` : void 0
-  }, slot, ...props, children: [
-    isLoading && /* @__PURE__ */ jsx(LoadingSpinner, { size: "1x" }),
-    !isLoading && /* @__PURE__ */ jsx(Icon, { ...iconProps })
-  ] });
+}, forwardedRef) {
+  const ref = useObjectRef(forwardedRef);
+  const {
+    size
+  } = props;
+  const finalIconProps = {
+    ...iconProps,
+    iconSize: size === "lg" ? "1.25x" : iconProps == null ? void 0 : iconProps.iconSize
+  };
+  const iconButtonComponent = /* @__PURE__ */ jsx(Button, { ref, ...props, iconButton: true, children: /* @__PURE__ */ jsx(Icon, { ...finalIconProps }) });
   if (tooltipLabel) {
-    return /* @__PURE__ */ jsx(Tooltip, { label: tooltipLabel, placement: tooltipPlacement, isDisabled, children: buttonContent });
+    return /* @__PURE__ */ jsx(Tooltip, { label: tooltipLabel, placement: tooltipPlacement, children: iconButtonComponent });
   }
-  return buttonContent;
+  return iconButtonComponent;
 });
-IconButton.displayName = "IconButton";
 export {
   IconButton,
   IconButton as default

package/dist/components/IconButton/IconButton.js.map

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

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

@@ -30,7 +30,6 @@ export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElemen
      * Aspect ratio of the image
      */
     aspectRatio?: number;
-    backgroundColour?: BackgroundVariants['backgroundColor'];
 }
 export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
 export default Image;

package/dist/components/Image/Image.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect } from "react";
+import React__default, { useState, useRef, useEffect } from "react";
 import { c as cva } from "../../index-DdUYounA.js";
 import { borderVariants } from "../../utils/border/border.js";
 import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundColor.js";
@@ -32,7 +32,7 @@ const imageVariants = cva(styles.image, {
 const useImageLoaded = (onLoadProp) => {
   const [loaded, setLoaded] = useState(false);
   const ref = useRef(null);
-  const handleLoad = React.useCallback((event) => {
+  const handleLoad = React__default.useCallback((event) => {
     if (typeof onLoadProp === "function") {
       onLoadProp(event);
     }
@@ -50,7 +50,7 @@ const useImageLoaded = (onLoadProp) => {
   };
 };
 const useMergedRef = (internalRef, forwardedRef) => {
-  return React.useMemo(() => {
+  return React__default.useMemo(() => {
     if (!forwardedRef) return internalRef;
     return (node) => {
       if (typeof forwardedRef === "function") {
@@ -62,7 +62,7 @@ const useMergedRef = (internalRef, forwardedRef) => {
     };
   }, [internalRef, forwardedRef]);
 };
-const Image = React.forwardRef(({
+const Image = React__default.forwardRef(({
   src,
   fallbackSrc,
   onError: onErrorProp,
@@ -71,15 +71,10 @@ const Image = React.forwardRef(({
   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,
@@ -90,7 +85,7 @@ const Image = React.forwardRef(({
   if (asChild && !children) {
     console.error("Image component: Children required when asChild is true");
   }
-  const handleError = React.useCallback((e) => {
+  const handleError = React__default.useCallback((e) => {
     if (fallbackSrc) {
       setError(true);
     }
@@ -105,7 +100,7 @@ const Image = React.forwardRef(({
       borderRadius
     })}
     ${backgroundColorVariants({
-      backgroundColor: resolvedBackgroundColor
+      backgroundColor
     })}
     ${imageVariants({
       fit
@@ -119,8 +114,8 @@ const Image = React.forwardRef(({
     },
     ...props
   };
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children, {
+  if (asChild && React__default.isValidElement(children)) {
+    return React__default.cloneElement(children, {
       ...imgProps,
       ...children.props
     });

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

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

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

@@ -52,21 +52,6 @@ export interface LinkProps extends AriaLinkProps {
      * 	The focus style of the button
      */
     focusStyle?: 'default' | 'white';
-    /**
-     * Whether an icon should display at the End of the Link
-     * @deprecated Use iconEndProps instead
-     */
-    iconEnd?: boolean;
-    /**
-     * Whether an icon should display at the End of the Link
-     * @deprecated Use iconEndProps instead
-     */
-    iconProps?: IconProps;
-    /**
-     * The text to display in the Link
-     * @deprecated Use children instead
-     */
-    linkText?: string;
 }
-declare const Link: ({ size, underline, iconStartProps, iconEndProps, iconProps, linkText, href, target, focusStyle, children, ariaLabelExternal, foregroundColor, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+declare const Link: ({ size, underline, iconStartProps, iconEndProps, href, target, focusStyle, children, ariaLabelExternal, foregroundColor, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 export default Link;

package/dist/components/Link/Link.js

@@ -52,9 +52,6 @@ const Link = ({
   iconEndProps = {
     iconName: "arrow-right"
   },
-  iconProps,
-  // deprecated
-  linkText,
   href,
   target = "_self",
   focusStyle = "default",
@@ -63,10 +60,6 @@ const Link = ({
   foregroundColor = "accentPrimary",
   ...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
@@ -96,10 +89,10 @@ const Link = ({
     iconStartProps && /* @__PURE__ */ jsx(Icon, { className: link({
       iconStart: !!iconStartProps
     }), iconSize, ...iconStartProps }),
-    children || linkText,
-    finalIconEndProps && /* @__PURE__ */ jsx(Icon, { className: link({
-      iconEnd: !!finalIconEndProps
-    }), iconSize, ...finalIconEndProps })
+    children,
+    iconEndProps && /* @__PURE__ */ jsx(Icon, { className: link({
+      iconEnd: !!iconEndProps
+    }), iconSize, ...iconEndProps })
   ] });
 };
 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/ListBoxItem/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './ListBoxItem';
 export type { ListBoxItemProps } from './ListBoxItem';
+export { default } from './ListBoxItem';

package/dist/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -1,9 +1,10 @@
+import { IconSize } from '../Icon/Icon';
 import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
 export interface LoadingSpinnerProps {
     /**
      * What size loading spinner
      */
-    size?: 'xs' | 'lg' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | undefined;
+    size?: IconSize;
     /**
      * What size loading spinner
      */

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -2,10 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-DdUYounA.js";
 import { ProgressBar } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
-import '../../assets/LoadingSpinner.css';const sm = "_sm_1tfp3_1";
-const md = "_md_1tfp3_5";
-const lg = "_lg_1tfp3_9";
+import '../../assets/LoadingSpinner.css';const loadingSpinner$1 = "_loadingSpinner_1kyw6_1";
+const sm = "_sm_1kyw6_5";
+const md = "_md_1kyw6_9";
+const lg = "_lg_1kyw6_13";
 const styles = {
+  loadingSpinner: loadingSpinner$1,
   sm,
   md,
   lg
@@ -30,7 +32,7 @@ const LoadingSpinner = ({
 }) => {
   return /* @__PURE__ */ jsx(ProgressBar, { className: `${loadingSpinner({
     buttonSize
-  })}  ${className}`, "aria-label": "Loading", children: /* @__PURE__ */ jsx(Icon, { iconName: "spinner-third", iconPrefix: "fad", iconSize: size, color: styleVariant, spin: true, buttonsize: buttonSize }) });
+  })}  ${className}`, "aria-label": "Loading", children: /* @__PURE__ */ jsx(Icon, { iconName: "spinner-third", iconPrefix: "fad", iconSize: size, color: styleVariant, spin: true, buttonsize: buttonSize, padding: "square" }) });
 };
 export {
   LoadingSpinner as default

package/dist/components/LoadingSpinner/LoadingSpinner.js.map

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

package/dist/components/MonthYearField/MonthYearField.d.ts

@@ -0,0 +1,107 @@
+import { FieldProps } from '../_base/Field';
+import { default as React } from 'react';
+export interface MonthYearFieldProps extends Omit<FieldProps, 'onChange'> {
+    /**
+     * The current value of the month (1-12 or "01"-"12").
+     */
+    monthValue?: string;
+    /**
+     * The current value of the year (2 or 4 digits, e.g., "24" or "2024").
+     */
+    yearValue?: string;
+    /**
+     * Format for the year input - 2 digits or 4 digits.
+     * @default 2
+     */
+    yearFormat?: 2 | 4;
+    /**
+     * Handler that is called when the value changes.
+     */
+    onChange?: (value: {
+        month: string;
+        year: string;
+    }) => void;
+    /**
+     * Handler that is called when the field is focused.
+     */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Handler that is called when the field loses focus.
+     */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Whether the field is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the field is read-only.
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the field is required.
+     */
+    isRequired?: boolean;
+    /**
+     * The autoComplete attribute for the month input.
+     */
+    autoCompleteMonth?: React.HTMLInputAutoCompleteAttribute | undefined;
+    /**
+     * The autoComplete attribute for the year input.
+     */
+    autoCompleteYear?: React.HTMLInputAutoCompleteAttribute | undefined;
+    /**
+     * The label for the month input.
+     * @default 'Month'
+     */
+    labelMonth?: string;
+    /**
+     * The label for the year input.
+     * @default 'Year'
+     */
+    labelYear?: string;
+    /**
+     * The placeholder for the month input.
+     * @default 'MM'
+     */
+    placeholderMonth?: string;
+    /**
+     * The placeholder for the year input.
+     * @default 'YY' for 2-digit format, 'YYYY' for 4-digit format
+     */
+    placeholderYear?: string;
+    /**
+     * Optional ID for the select element. If not provided, one will be generated.
+     */
+    id?: string;
+    /**
+     * The name attribute for form integration. A hidden input with this name
+     * will contain the combined month/year value (e.g., "MM/YY" or "MM/YYYY").
+     */
+    name?: string;
+}
+export interface MonthYearFieldRef {
+    /**
+     * Focus the month input.
+     */
+    focusMonth: () => void;
+    /**
+     * Focus the year input.
+     */
+    focusYear: () => void;
+    /**
+     * Get the current values.
+     */
+    getValue: () => {
+        month: string;
+        year: string;
+    };
+    /**
+     * Set the values programmatically.
+     */
+    setValue: (value: {
+        month: string;
+        year: string;
+    }) => void;
+}
+export declare const MonthYearField: React.ForwardRefExoticComponent<MonthYearFieldProps & React.RefAttributes<MonthYearFieldRef>>;
+export default MonthYearField;