@alto-avios/alto-ui 2.4.0 → 3.1.0

package/dist/components/Slider/Slider.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Slider as Slider$1, SliderTrack, SliderThumb } from "react-aria-components";
+import { useId, useRef } from "react";
+import { Box } from "../Box/Box.js";
+import { FieldHeader } from "../FieldHeader/FieldHeader.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import '../../assets/Slider.css';const fieldHeaderWrapper = "_fieldHeaderWrapper_12sym_1";
+const output = "_output_12sym_5";
+const sliderContainer = "_sliderContainer_12sym_14";
+const track = "_track_12sym_21";
+const fill = "_fill_12sym_30";
+const thumbContainer = "_thumbContainer_12sym_37";
+const thumb = "_thumb_12sym_37";
+const slider = "_slider_12sym_14";
+const styles = {
+  fieldHeaderWrapper,
+  output,
+  sliderContainer,
+  track,
+  fill,
+  thumbContainer,
+  thumb,
+  slider
+};
+const CustomThumb = ({
+  index,
+  state,
+  formatValue,
+  isDisabled,
+  showTooltip = false,
+  label,
+  minValue,
+  maxValue,
+  isRange
+}) => {
+  const isDragging = state.isThumbDragging(index);
+  const isFocused = state.focusedThumb === index;
+  const isTooltipVisible = showTooltip && (isDragging || isFocused);
+  const thumbRef = useRef(null);
+  const value = state.values[index];
+  const thumbLabel = isRange ? `${index === 0 ? "Minimum" : "Maximum"} value for ${label}` : label;
+  const valueDescription = `${formatValue(value)} out of range ${formatValue(minValue)} to ${formatValue(maxValue)}`;
+  return /* @__PURE__ */ jsxs("div", { className: styles.thumbContainer, style: {
+    left: `${state.getThumbPercent(index) * 100}%`
+  }, role: "presentation", children: [
+    /* @__PURE__ */ jsx(SliderThumb, { index, className: styles.thumb, ref: thumbRef, "aria-label": thumbLabel, "aria-valuetext": valueDescription }),
+    /* @__PURE__ */ jsx(Tooltip, { label: formatValue(state.values[index]), placement: "top", isDisabled, visible: isTooltipVisible, triggerRef: thumbRef, children: /* @__PURE__ */ jsx("div", { role: "presentation" }) })
+  ] });
+};
+const Slider = ({
+  label,
+  description,
+  isDisabled = false,
+  isRange = false,
+  minValue = 0,
+  maxValue = 100,
+  step,
+  formatOptions,
+  defaultValue = isRange ? [25, 75] : 50,
+  value,
+  id: providedId,
+  onChange,
+  showTooltip = false
+}) => {
+  const uniqueId = useId();
+  const id = providedId || `slider-${uniqueId}`;
+  const calculatedStep = step ?? (typeof formatOptions === "object" && (formatOptions == null ? void 0 : formatOptions.style) === "currency" ? 0.01 : typeof defaultValue === "number" ? defaultValue % 1 !== 0 ? 0.01 : 1 : Array.isArray(defaultValue) && defaultValue.some((v) => v % 1 !== 0) ? 0.01 : 1);
+  const formatValue = (val) => {
+    if (typeof formatOptions === "function") {
+      return formatOptions(val, maxValue);
+    }
+    if (!formatOptions) {
+      const decimalPlaces = calculatedStep < 1 ? 2 : 0;
+      return val.toFixed(decimalPlaces);
+    }
+    return new Intl.NumberFormat(void 0, formatOptions).format(val);
+  };
+  const sliderProps = {
+    id,
+    isDisabled,
+    minValue,
+    maxValue,
+    step: calculatedStep,
+    defaultValue,
+    value,
+    onChange,
+    className: styles.slider,
+    orientation: "horizontal"
+  };
+  return /* @__PURE__ */ jsx(Box, { display: "flex", flexDirection: "column", gap: "md", padding: "md", children: /* @__PURE__ */ jsx(Slider$1, { ...sliderProps, children: ({
+    state
+  }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.fieldHeaderWrapper, children: [
+      /* @__PURE__ */ jsx(FieldHeader, { label, description, labelFor: id, isRequired: true }),
+      /* @__PURE__ */ jsx("div", { className: styles.output, "aria-live": "polite", "aria-atomic": "true", children: isRange ? /* @__PURE__ */ jsx("span", { children: `${formatValue(state.values[0])} - ${formatValue(state.values[1])}` }) : /* @__PURE__ */ jsx("span", { children: formatValue(state.values[0]) }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.sliderContainer, role: "presentation", children: /* @__PURE__ */ jsxs(SliderTrack, { className: styles.track, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.fill, style: {
+        left: isRange ? `${state.getThumbPercent(0) * 100}%` : 0,
+        width: isRange ? `${(state.getThumbPercent(1) - state.getThumbPercent(0)) * 100}%` : `${state.getThumbPercent(0) * 100}%`
+      }, role: "presentation" }),
+      isRange ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(CustomThumb, { index: 0, state, formatValue, isDisabled, showTooltip, label: label || "", minValue, maxValue: state.values[1], isRange: true }),
+        /* @__PURE__ */ jsx(CustomThumb, { index: 1, state, formatValue, isDisabled, showTooltip, label: label || "", minValue: state.values[0], maxValue, isRange: true })
+      ] }) : /* @__PURE__ */ jsx(CustomThumb, { index: 0, state, formatValue, isDisabled, showTooltip, label: label || "", minValue, maxValue, isRange: false })
+    ] }) })
+  ] }) }) });
+};
+export {
+  Slider,
+  Slider as default
+};
+//# sourceMappingURL=Slider.js.map

package/dist/components/Slider/Slider.js.map

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

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

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

package/dist/components/Slider/index.js

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

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

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

package/dist/components/SubHeading/SubHeading.d.ts

@@ -1,20 +1,41 @@
 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 subHeading: (props?: ({
     size?: "sm" | "xs" | null | undefined;
-    textAlign?: "start" | "center" | "end" | null | undefined;
+    textAlign?: "end" | "start" | "center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type HeadingVariants = VariantProps<typeof subHeading>;
-type FgColorVariants = VariantProps<typeof fgColorVariants>;
 type SubHeadingLevel = 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 type SubHeadingSize = 'xs' | 'sm';
 export interface HeadingProps extends HeadingVariants {
+    /**
+     * children
+     */
     children: React.ReactNode;
+    /**
+     * The heading element to render
+     */
     as?: SubHeadingLevel;
+    /**
+     * The size of the heading
+     */
     size?: SubHeadingSize;
-    fgColor?: FgColorVariants['fgColor'];
+    /**
+     * The foreground color of the heading
+     * @default "accentPrimary"
+     */
+    foregroundColor?: ForegroundVariants['foregroundColor'];
+    /**
+     * The foreground color of the heading
+     * @deprecated Use `foregroundColor` instead
+     */
+    fgColor?: ForegroundVariants['foregroundColor'];
+    /**
+     * The text alignment of the heading
+     * @default "start"
+     */
     textAlign?: 'start' | 'center' | 'end';
 }
-export declare const SubHeading: ({ children, as: Component, size, fgColor, textAlign, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SubHeading: ({ children, as: Component, size, foregroundColor, fgColor, textAlign, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
 export default SubHeading;

package/dist/components/SubHeading/SubHeading.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/SubHeading.css';const subHeading$1 = "_subHeading_up5r4_1";
 const xs = "_xs_up5r4_8";
 const sm = "_sm_up5r4_15";
@@ -36,16 +36,21 @@ const SubHeading = ({
   children,
   as: Component = "span",
   size,
-  fgColor = "accentPrimary",
+  foregroundColor = "accentPrimary",
+  fgColor,
   textAlign = "start",
   ...props
 }) => {
   const effectiveSize = size;
+  if (fgColor) {
+    console.warn("The `fgColor` prop has been deprecated. Please use `foregroundColor` instead.");
+  }
+  const resolvedFontColor = fgColor ?? foregroundColor ?? "accentPrimary";
   return /* @__PURE__ */ jsx(Component, { className: `${subHeading({
     size: effectiveSize,
     textAlign
-  })} ${fgColorVariants({
-    fgColor
+  })} ${foregroundColorVariants({
+    foregroundColor: resolvedFontColor
   })}`, ...props, children });
 };
 export {

package/dist/components/SubHeading/SubHeading.js.map

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

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { SwitchProps as AriaSwitchProps } from 'react-aria-components';
+export interface SwitchProps extends AriaSwitchProps {
+    children?: React.ReactNode;
+}
+export declare const Switch: (props: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export default Switch;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Switch as Switch$1 } from "react-aria-components";
+import '../../assets/Switch.css';const indicator = "_indicator_1mhci_18";
+const styles = {
+  "switch": "_switch_1mhci_1",
+  indicator
+};
+const Switch = (props) => {
+  return /* @__PURE__ */ jsxs(Switch$1, { ...props, className: styles.switch, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.indicator }),
+    (props == null ? void 0 : props.children) && /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: props == null ? void 0 : props.name, children: props.children })
+  ] });
+};
+export {
+  Switch,
+  Switch as default
+};
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch/Switch.js.map

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

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

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

package/dist/components/Switch/index.js

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

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

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

package/dist/components/TagGroup/TagGroup.js

@@ -26,7 +26,7 @@ const TagGroup = ({
   return /* @__PURE__ */ jsxs(TagGroup$1, { className: styles.tagGroup, selectionMode, ...props, children: [
     /* @__PURE__ */ jsxs("span", { className: styles.spanContainer, children: [
       /* @__PURE__ */ jsx(FieldLabel, { children: label }),
-      clearButton && /* @__PURE__ */ jsx(Button, { styleType: "accent", emphasis: "quaternary", size: "sm", onClick: clearButtonOnClick, children: "Clear" })
+      clearButton && /* @__PURE__ */ jsx(Button, { styleVariant: "accent", emphasis: "quaternary", size: "sm", onPress: clearButtonOnClick, children: "Clear" })
     ] }),
     description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
     /* @__PURE__ */ jsx(TagList, { className: styles.tagGroupList, items, renderEmptyState, children })

package/dist/components/TextAreaField/TextAreaField.d.ts

@@ -1,3 +1,3 @@
 import { TextFieldProps } from '../TextField/TextField';
-export declare const TextAreaField: ({ label, description, defaultValue, errorMessage, isDisabled, isInvalid, isRequired, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextAreaField: (props: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default TextAreaField;

package/dist/components/TextAreaField/TextAreaField.js

@@ -1,26 +1,14 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { TextField, TextArea } from "react-aria-components";
-import { FieldHeader } from "../FieldHeader/FieldHeader.js";
-import '../../assets/TextAreaField.css';const textAreaField = "_textAreaField_bruz2_1";
-const validationError = "_validationError_bruz2_67";
+import { Field } from "../_base/Field/Field.js";
+import '../../assets/TextAreaField.css';const textAreaField = "_textAreaField_1hjyj_1";
+const validationError = "_validationError_1hjyj_71";
 const styles = {
   textAreaField,
   validationError
 };
-const TextAreaField = ({
-  label,
-  description,
-  defaultValue,
-  errorMessage,
-  isDisabled,
-  isInvalid,
-  isRequired = false,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs(TextField, { className: styles.textAreaField, defaultValue, isDisabled, isInvalid, ...props, children: [
-    /* @__PURE__ */ jsx(FieldHeader, { label, description, errorMessage, isRequired, isInvalid }),
-    /* @__PURE__ */ jsx(TextArea, {})
-  ] });
+const TextAreaField = (props) => {
+  return /* @__PURE__ */ jsx(Field, { as: TextField, className: styles.textAreaField, ...props, children: /* @__PURE__ */ jsx(TextArea, {}) });
 };
 export {
   TextAreaField,

package/dist/components/TextAreaField/TextAreaField.js.map

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

package/dist/components/TextField/TextField.d.ts

@@ -1,34 +1,7 @@
-import { TextFieldProps as AriaTextFieldProps, ValidationResult } from 'react-aria-components';
+import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
 import { IconProps } from '../Icon/Icon';
-export interface TextFieldProps extends AriaTextFieldProps {
-    /**
-     * The label for the TextField
-     */
-    label?: string;
-    /**
-     * The description for the TextField
-     */
-    description?: string;
-    /**
-     * The error message for the TextField
-     */
-    errorMessage?: string | ((validation: ValidationResult) => string);
-    /**
-     * Whether the TextField is disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * The default value for the TextField
-     */
-    defaultValue?: string;
-    /**
-     * Whether the TextField is invalid
-     */
-    isInvalid?: boolean;
-    /**
-     * Whether the TextField is required
-     */
-    isRequired?: boolean;
+import { FieldProps } from '../_base/Field';
+export interface TextFieldProps extends FieldProps<AriaTextFieldProps> {
     /**
      * Whether an icon should display at the start of the TextField
      */
@@ -38,5 +11,5 @@ export interface TextFieldProps extends AriaTextFieldProps {
      */
     iconEndProps?: IconProps;
 }
-export declare const TextField: ({ label, description, defaultValue, errorMessage, isDisabled, isInvalid, isRequired, iconStartProps, iconEndProps, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextField: ({ iconStartProps, iconEndProps, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default TextField;

package/dist/components/TextField/TextField.js

@@ -1,7 +1,7 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { TextField as TextField$1, Input } from "react-aria-components";
-import { FieldHeader } from "../FieldHeader/FieldHeader.js";
 import { Icon } from "../Icon/Icon.js";
+import { Field } from "../_base/Field/Field.js";
 import '../../assets/TextField.css';const textField = "_textField_1kom2_1";
 const inputWrapper = "_inputWrapper_1kom2_45";
 const iconStart = "_iconStart_1kom2_51";
@@ -13,25 +13,15 @@ const styles = {
   iconEnd
 };
 const TextField = ({
-  label,
-  description,
-  defaultValue,
-  errorMessage,
-  isDisabled,
-  isInvalid,
-  isRequired = false,
   iconStartProps,
   iconEndProps,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(TextField$1, { className: styles.textField, defaultValue, isDisabled, isInvalid, ...props, children: [
-    /* @__PURE__ */ jsx(FieldHeader, { label, description, errorMessage, isRequired, isInvalid }),
-    /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
-      iconStartProps && /* @__PURE__ */ jsx(Icon, { ...iconStartProps, className: styles.iconStart }),
-      /* @__PURE__ */ jsx(Input, {}),
-      iconEndProps && /* @__PURE__ */ jsx(Icon, { ...iconEndProps, className: styles.iconEnd })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx(Field, { as: TextField$1, className: styles.textField, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
+    iconStartProps && /* @__PURE__ */ jsx(Icon, { ...iconStartProps, className: styles.iconStart }),
+    /* @__PURE__ */ jsx(Input, {}),
+    iconEndProps && /* @__PURE__ */ jsx(Icon, { ...iconEndProps, className: styles.iconEnd })
+  ] }) });
 };
 export {
   TextField,

package/dist/components/TextField/TextField.js.map

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

package/dist/components/ToggleButton/ToggleButton.js

@@ -4,14 +4,14 @@ import { useRef, useState, useEffect } from "react";
 import { ToggleButton as ToggleButton$1 } from "react-aria-components";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/ToggleButton.css';const toggleButton$1 = "_toggleButton_17fie_1";
-const sm = "_sm_17fie_35";
-const md = "_md_17fie_42";
-const lg = "_lg_17fie_48";
+import '../../assets/ToggleButton.css';const toggleButton$1 = "_toggleButton_1q059_1";
+const sm = "_sm_1q059_35";
+const md = "_md_1q059_42";
+const lg = "_lg_1q059_48";
 const styles = {
   toggleButton: toggleButton$1,
-  "fa-spinner-third": "_fa-spinner-third_17fie_21",
-  "icon-wrapper": "_icon-wrapper_17fie_26",
+  "fa-spinner-third": "_fa-spinner-third_1q059_21",
+  "icon-wrapper": "_icon-wrapper_1q059_26",
   sm,
   md,
   lg

package/dist/components/ToggleIconButton/ToggleIconButton.d.ts

@@ -14,6 +14,14 @@ export interface ToggleIconButtonProps extends Omit<ToggleButtonProps, 'children
      *  Handler that is called when the press is released over the target.
      */
     onClick?: (e: PressEvent) => void;
+    /**
+     * Tooltip text to display on hover and focus
+     */
+    tooltipLabel?: string;
+    /**
+     * Tooltip placement relative to the button
+     */
+    tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
 }
-declare const ToggleIconButton: ({ iconProps, isLoading, size, focusStyle, isSelected, defaultSelected, isDisabled, autoFocus, type, onClick, ...props }: ToggleIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const ToggleIconButton: ({ iconProps, isLoading, size, focusStyle, tooltipLabel, tooltipPlacement, isSelected, defaultSelected, isDisabled, autoFocus, type, onClick, ...props }: ToggleIconButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default ToggleIconButton;

package/dist/components/ToggleIconButton/ToggleIconButton.js

@@ -5,17 +5,18 @@ import { ToggleButton } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/ToggleIconButton.css';const toggleIconButton$1 = "_toggleIconButton_1pk2t_1";
-const sm = "_sm_1pk2t_26";
-const md = "_md_1pk2t_32";
-const lg = "_lg_1pk2t_38";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import '../../assets/ToggleIconButton.css';const toggleIconButton$1 = "_toggleIconButton_1za7z_1";
+const sm = "_sm_1za7z_26";
+const md = "_md_1za7z_32";
+const lg = "_lg_1za7z_38";
 const styles = {
   toggleIconButton: toggleIconButton$1,
-  "icon-wrapper": "_icon-wrapper_1pk2t_17",
+  "icon-wrapper": "_icon-wrapper_1za7z_17",
   sm,
   md,
   lg,
-  "fa-spinner-third": "_fa-spinner-third_1pk2t_44"
+  "fa-spinner-third": "_fa-spinner-third_1za7z_44"
 };
 const toggleIconButton = cva(styles.toggleIconButton, {
   variants: {
@@ -36,6 +37,8 @@ const ToggleIconButton = ({
   isLoading = false,
   size = "md",
   focusStyle = "default",
+  tooltipLabel = "",
+  tooltipPlacement = "top",
   // react-aria props
   isSelected,
   defaultSelected,
@@ -65,16 +68,20 @@ const ToggleIconButton = ({
       onClick(e);
     }
   };
-  return /* @__PURE__ */ jsxs(ToggleButton, { className: `${toggleIconButton({
+  const buttonContent = /* @__PURE__ */ jsxs(ToggleButton, { className: `${toggleIconButton({
     size
   })} ${focusStyleVariants({
     focusStyle
-  })}`, ref: buttonRef, isSelected: selectedState, defaultSelected, isDisabled, autoFocus, type, onPress: handlePress, "aria-label": isLoading ? "Loading Spinner" : "Icon", style: {
+  })}`, ref: buttonRef, isSelected: selectedState, defaultSelected, isDisabled, autoFocus, type, onPress: handlePress, "aria-label": tooltipLabel ? void 0 : isLoading ? "Loading Spinner" : "Icon", style: {
     width: isLoading && buttonWidth ? `${buttonWidth}px` : void 0
   }, ...props, children: [
     isLoading && /* @__PURE__ */ jsx(LoadingSpinner, { size: "1x" }),
     !isLoading && /* @__PURE__ */ jsx(Icon, { ...iconProps })
   ] });
+  if (tooltipLabel) {
+    return /* @__PURE__ */ jsx(Tooltip, { label: tooltipLabel, placement: tooltipPlacement, isDisabled, children: buttonContent });
+  }
+  return buttonContent;
 };
 export {
   ToggleIconButton as default

package/dist/components/ToggleIconButton/ToggleIconButton.js.map

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

package/dist/components/Tooltip/Tooltip.d.ts

@@ -26,6 +26,10 @@ export interface TooltipProps extends AriaTooltipProps {
       By default, opens for both focus and hover. Can be made to open only for focus.
     */
     trigger?: 'focus';
+    /**
+      Controls the visibility of the tooltip
+    */
+    visible?: boolean;
 }
-export declare const Tooltip: ({ label, placement, isDisabled, delay, closeDelay, children, trigger, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ label, placement, isDisabled, delay, closeDelay, children, trigger, visible, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -14,11 +14,12 @@ const Tooltip = ({
   closeDelay,
   children,
   trigger,
+  visible,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(TooltipTrigger, { isDisabled, delay, closeDelay, trigger, children: [
+  return /* @__PURE__ */ jsxs(TooltipTrigger, { isDisabled, delay, closeDelay, trigger, isOpen: visible, children: [
     children,
-    /* @__PURE__ */ jsx(Tooltip$1, { className: styles.tooltip, placement, ...props, children: label })
+    /* @__PURE__ */ jsx(Tooltip$1, { className: styles.tooltip, placement, ...props, children: /* @__PURE__ */ jsx("div", { "data-placement": placement, children: label }) })
   ] });
 };
 export {

package/dist/components/Tooltip/Tooltip.js.map

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

package/dist/components/_base/Field/Field.d.ts

@@ -0,0 +1,16 @@
+import { FieldHeaderProps } from '../../FieldHeader';
+import { default as React } from 'react';
+export interface FieldCommonProps extends FieldHeaderProps {
+    /**
+     * Whether the Field is disabled
+     */
+    isDisabled?: boolean;
+}
+export type FieldProps<T extends object = object> = T & FieldCommonProps;
+type FieldBaseProps<T extends object> = FieldProps<T> & {
+    as: React.ElementType;
+    children: React.ReactNode;
+    className?: React.ComponentProps<React.ElementType>['className'];
+};
+export declare function Field<T extends object>({ as, children, className, ...props }: FieldBaseProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Field;

package/dist/components/_base/Field/Field.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { FieldHeader } from "../../FieldHeader/FieldHeader.js";
+import React from "react";
+function PolymorphicField({
+  as,
+  children,
+  ...props
+}) {
+  if (!as) {
+    console.warn("@alto/ui: Field expects an as prop");
+  }
+  return as ? React.createElement(as, props, children) : /* @__PURE__ */ jsx("div", { children });
+}
+function Field({
+  as,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(PolymorphicField, { as, isDisabled: props == null ? void 0 : props.isDisabled, className, isRequired: props == null ? void 0 : props.isRequired, ...props, children: [
+    (props == null ? void 0 : props.label) ? /* @__PURE__ */ jsx(FieldHeader, { label: props == null ? void 0 : props.label, description: props == null ? void 0 : props.description, errorMessage: props == null ? void 0 : props.errorMessage, isInvalid: props == null ? void 0 : props.isInvalid, isRequired: props == null ? void 0 : props.isRequired, labelFor: props == null ? void 0 : props.labelFor }) : null,
+    children
+  ] });
+}
+export {
+  Field,
+  Field as default
+};
+//# sourceMappingURL=Field.js.map

package/dist/components/_base/Field/Field.js.map

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

package/dist/components/_base/Field/index.d.ts

@@ -0,0 +1,2 @@
+export { Field } from './Field';
+export type { FieldProps } from './Field';

package/dist/components/_base/Field/index.js

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

package/dist/components/_base/Field/index.js.map

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