@alto-avios/alto-ui 2.4.0 → 3.1.0

package/dist/components/PasswordField/PasswordField.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Field } from "../_base/Field/Field.js";
+import { TextField, Group, Input } from "react-aria-components";
+import { IconButton } from "../IconButton/IconButton.js";
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import { Icon } from "../Icon/Icon.js";
+import '../../assets/PasswordField.css';const passwordField = "_passwordField_esslh_1";
+const passwordField__strength = "_passwordField__strength_esslh_10";
+const passwordStrengthItem$1 = "_passwordStrengthItem_esslh_88";
+const passwordStrengthItemValid = "_passwordStrengthItemValid_esslh_98";
+const passwordStrengthItemNeutral = "_passwordStrengthItemNeutral_esslh_102";
+const passwordStrengthItemInvalid = "_passwordStrengthItemInvalid_esslh_106";
+const styles = {
+  passwordField,
+  passwordField__strength,
+  passwordStrengthItem: passwordStrengthItem$1,
+  passwordStrengthItemValid,
+  passwordStrengthItemNeutral,
+  passwordStrengthItemInvalid
+};
+const PasswordField = ({
+  tooltipLabelShowPassword = "Show Password",
+  tooltipLabelHidePassword = "Hide Password",
+  requirementsLabel = "Password requirements",
+  ...props
+}) => {
+  var _a;
+  const [internalVisible, setInternalVisible] = useState(props.isVisible || false);
+  const [internalValue, setInternalValue] = useState(props == null ? void 0 : props.defaultValue);
+  const value = (props == null ? void 0 : props.value) ?? internalValue;
+  const isVisibleState = (props == null ? void 0 : props.isVisible) ?? internalVisible;
+  const handleChange = React.useCallback((e) => {
+    var _a2;
+    setInternalValue(e.target.value);
+    (_a2 = props == null ? void 0 : props.onChange) == null ? void 0 : _a2.call(props, e.target.value);
+  }, [props == null ? void 0 : props.onChange]);
+  const tooltipLabel = isVisibleState ? tooltipLabelHidePassword : tooltipLabelShowPassword;
+  return /* @__PURE__ */ jsx("div", { className: styles["passwordField"], children: /* @__PURE__ */ jsxs(Field, { as: TextField, className: styles.passwordField, label: "Password", ...props, children: [
+    /* @__PURE__ */ jsxs(Group, { children: [
+      /* @__PURE__ */ jsx(Input, { type: isVisibleState ? "text" : "password", value, onChange: handleChange }),
+      /* @__PURE__ */ jsx(IconButton, { size: "sm", iconProps: isVisibleState ? {
+        iconName: "eye",
+        iconPrefix: "fas"
+      } : {
+        iconName: "eye-slash",
+        iconPrefix: "fas"
+      }, onClick: () => setInternalVisible(!isVisibleState), isDisabled: props == null ? void 0 : props.isDisabled, styleVariant: "neutral", emphasis: "tertiary", "aria-label": tooltipLabel, tooltipLabel })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: styles["passwordField__strength"], "aria-label": requirementsLabel, "aria-live": "polite", children: (_a = props.strengthValidations) == null ? void 0 : _a.map((validation) => /* @__PURE__ */ jsx(PasswordStrengthItem, { status: value ? validation.validation(value) ? "valid" : "invalid" : "neutral", message: validation.message }, `${validation.message}-${value}`)) })
+  ] }) });
+};
+const passwordStrengthItem = cva(styles.passwordStrengthItem, {
+  variants: {
+    status: {
+      valid: styles.passwordStrengthItemValid,
+      neutral: styles.passwordStrengthItemNeutral,
+      invalid: styles.passwordStrengthItemInvalid
+    }
+  },
+  defaultVariants: {
+    status: "neutral"
+  }
+});
+function getIcon(status) {
+  switch (status) {
+    case "invalid":
+      return {
+        iconName: "circle-xmark",
+        ariaLabel: "Requirement not met: "
+      };
+    case "valid":
+      return {
+        iconName: "circle-check",
+        ariaLabel: "Requirement met: "
+      };
+    case "neutral":
+    default:
+      return {
+        iconName: "circle-minus",
+        ariaLabel: "Requirement: "
+      };
+  }
+}
+const PasswordStrengthItem = ({
+  status,
+  message
+}) => {
+  const {
+    iconName,
+    ariaLabel
+  } = getIcon(status);
+  return /* @__PURE__ */ jsxs("li", { className: passwordStrengthItem({
+    status
+  }), "aria-label": `${ariaLabel}${message}`, children: [
+    /* @__PURE__ */ jsx(Icon, { iconName, iconPrefix: "fas" }),
+    /* @__PURE__ */ jsx("span", { children: message })
+  ] });
+};
+export {
+  PasswordField,
+  PasswordField as default
+};
+//# sourceMappingURL=PasswordField.js.map

package/dist/components/PasswordField/PasswordField.js.map

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

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

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

package/dist/components/PasswordField/index.js

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

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

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

package/dist/components/PhoneNumberField/PhoneNumberField.d.ts

@@ -0,0 +1,53 @@
+import { PhoneNumberFieldOption, PhoneNumberValue } from '../../utils/phoneNumber/phoneNumber';
+import { FieldProps } from '../_base/Field';
+export interface PhoneNumberFieldProps extends FieldProps {
+    /**
+     * Country code of the default phone number
+     */
+    defaultCountry?: string;
+    /**
+     * Whether to show the country select
+     */
+    hasCountrySelect?: boolean;
+    /**
+     * Limit selectable country codes
+     */
+    countryCodes?: string[];
+    /**
+     * Phone number options
+     * When undefined will use default options (all)
+     */
+    options?: PhoneNumberFieldOption[];
+    /**
+     * Handle phone number change
+     * Returns raw phone number without formatting
+     */
+    onChange?: (value: PhoneNumberValue) => void;
+    /**
+     * Controlled country code
+     */
+    countryCode?: string;
+    /**
+     * Controlled input value
+     */
+    value?: string;
+    /**
+     * Wether to format the phone number according to country pattern
+     */
+    isFormatted?: boolean;
+    /**
+     * Optional ID for the select element. If not provided, one will be generated.
+     */
+    id?: string;
+    /**
+     * The label for the country select
+     *
+     */
+    countrySelectLabel?: string;
+    /**
+     * The placeholder for the phone number input
+     */
+    placeholder?: string;
+}
+export declare const PhoneNumberField: ({ defaultCountry, hasCountrySelect, options, onChange, countryCode: countryCodeControlled, value: valueControlled, countryCodes, isFormatted, id: providedId, countrySelectLabel, ...props }: PhoneNumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default PhoneNumberField;

package/dist/components/PhoneNumberField/PhoneNumberField.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useId } from "react";
+import { TextField, Input } from "react-aria-components";
+import { u as usePatternFormat, N as NumberFormatBase } from "../../react-number-format.es-DMLgWFZX.js";
+import { DEFAULT_PATTERN, getCountryOptions, getCountryFlagEmoji, countryPhoneMap, getPhoneNumberValue } from "../../utils/phoneNumber/phoneNumber.js";
+import { Field } from "../_base/Field/Field.js";
+import '../../assets/PhoneNumberField.css';const phoneNumberField = "_phoneNumberField_1owea_1";
+const selectHandlerValue = "_selectHandlerValue_1owea_35";
+const selectHandlerIcon = "_selectHandlerIcon_1owea_66";
+const selectWrapper = "_selectWrapper_1owea_78";
+const styles = {
+  phoneNumberField,
+  selectHandlerValue,
+  selectHandlerIcon,
+  selectWrapper
+};
+const PhoneNumberField = ({
+  defaultCountry = "GB",
+  hasCountrySelect = true,
+  options = countryPhoneMap,
+  onChange,
+  countryCode: countryCodeControlled,
+  value: valueControlled,
+  countryCodes,
+  isFormatted = true,
+  id: providedId,
+  countrySelectLabel = "Select a country",
+  ...props
+}) => {
+  const inputRef = useRef(null);
+  const [countryCode, setCountryCode] = useState(defaultCountry);
+  const countryCodeDefinitive = countryCodeControlled ?? countryCode;
+  const [value, setValue] = useState("");
+  const valueDefinitive = valueControlled ?? value;
+  const phoneInfo = options == null ? void 0 : options.find((p) => p.countryCode === countryCodeDefinitive);
+  const uniqueId = useId();
+  const id = providedId || uniqueId;
+  const pattern = hasCountrySelect ? ((phoneInfo == null ? void 0 : phoneInfo.pattern) ?? DEFAULT_PATTERN) + "#" : DEFAULT_PATTERN;
+  const [ignorePattern, setIgnorePattern] = useState(false);
+  const {
+    format,
+    ...inputProps
+  } = usePatternFormat({
+    allowEmptyFormatting: true,
+    format: ignorePattern || !isFormatted ? DEFAULT_PATTERN : pattern
+  });
+  const handleFormat = (val) => {
+    const formatted = typeof format === "function" ? format(val) : format;
+    const formattedOutput = formatted == null ? void 0 : formatted.trim();
+    if (formattedOutput && formattedOutput.length > 0 && formattedOutput.length === pattern.length) {
+      setIgnorePattern(true);
+    }
+    return formatted ?? val;
+  };
+  const handleInputChange = (inputValue) => {
+    if (inputValue === valueDefinitive) return;
+    onChange == null ? void 0 : onChange(getPhoneNumberValue({
+      value: inputValue,
+      countryCode: countryCodeDefinitive,
+      options
+    }));
+    setValue(inputValue);
+  };
+  const handleSelectCountry = (countryCodeValue) => {
+    var _a;
+    setCountryCode(countryCodeValue);
+    onChange == null ? void 0 : onChange(getPhoneNumberValue({
+      value: valueDefinitive,
+      countryCode: countryCodeValue,
+      options
+    }));
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const countryOptions = getCountryOptions(options, countryCodes);
+  const defaultValue = countryOptions.find((opt) => opt.value === defaultCountry);
+  return /* @__PURE__ */ jsx(Field, { as: TextField, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.phoneNumberField, children: [
+    /* @__PURE__ */ jsx(NumberFormatBase, { type: "tel", format: handleFormat, autoComplete: "tel", customInput: Input, getInputRef: inputRef, "aria-label": (props == null ? void 0 : props.label) || "Phone number", ...inputProps, onValueChange: (e) => handleInputChange(e.value), value: valueDefinitive, placeholder: props == null ? void 0 : props.placeholder }),
+    hasCountrySelect && /* @__PURE__ */ jsxs("div", { className: styles.selectWrapper, children: [
+      /* @__PURE__ */ jsx("select", { className: styles.selectInput, defaultValue: defaultValue == null ? void 0 : defaultValue.value, value: countryCodeDefinitive, onChange: (e) => handleSelectCountry(e.target.value), "aria-label": countrySelectLabel, id: `${id}-country-select`, disabled: props == null ? void 0 : props.isDisabled, "aria-disabled": props == null ? void 0 : props.isDisabled, children: countryOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.selectHandlerValue, "aria-hidden": "true", id: `${id}-country-display`, children: [
+        getCountryFlagEmoji(countryCodeDefinitive) + " " + countryCodeDefinitive,
+        /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "13", height: "16", fill: "none", viewBox: "0 0 13 16", className: styles.selectHandlerIcon, "aria-hidden": "true", role: "presentation", children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "m6.926 2.664 3.75 3c.305.281.375.75.117 1.055-.28.328-.75.375-1.054.117L6.457 4.21l-3.28 2.625a.747.747 0 0 1-1.056-.117.75.75 0 0 1 .118-1.055l3.75-3c.257-.21.656-.21.937 0m3.75 8.672-3.75 3a.71.71 0 0 1-.937 0l-3.75-3c-.328-.258-.399-.727-.118-1.055a.77.77 0 0 1 1.055-.117l3.281 2.625 3.282-2.625c.304-.258.797-.187 1.054.117a.77.77 0 0 1-.117 1.055" }) })
+      ] })
+    ] })
+  ] }) });
+};
+export {
+  PhoneNumberField,
+  PhoneNumberField as default
+};
+//# sourceMappingURL=PhoneNumberField.js.map

package/dist/components/PhoneNumberField/PhoneNumberField.js.map

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

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

@@ -0,0 +1,3 @@
+export { default } from './PhoneNumberField';
+export { countryPhoneMap, type PhoneNumberValue, type PhoneNumberFieldOption, } from '../../utils/phoneNumber/phoneNumber';
+export type { PhoneNumberFieldProps } from './PhoneNumberField';

package/dist/components/PhoneNumberField/index.js

@@ -0,0 +1,7 @@
+import { PhoneNumberField } from "./PhoneNumberField.js";
+import { countryPhoneMap } from "../../utils/phoneNumber/phoneNumber.js";
+export {
+  countryPhoneMap,
+  PhoneNumberField as default
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { OverlayTriggerState } from 'react-stately';
+export interface PopoverProps {
+    /** Content to be rendered inside the popover */
+    children: React.ReactNode;
+    /** State object controlling the overlay's open/closed status */
+    state: OverlayTriggerState;
+    /** Direction of the popover arrow - affects initial placement */
+    arrowDirection?: 'top' | 'right' | 'bottom' | 'left';
+    /** Reference to the trigger element that opens the popover */
+    triggerRef: React.RefObject<HTMLButtonElement>;
+    /** Whether to show the directional arrow on the popover */
+    hasArrow?: boolean;
+}
+export declare const Popover: ({ children, state, arrowDirection, triggerRef, hasArrow, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export default Popover;

package/dist/components/Popover/Popover.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef, useEffect } from "react";
+import { usePopover, Overlay, DismissButton } from "@react-aria/overlays";
+import { FocusScope } from "@react-aria/focus";
+import { mergeProps } from "@react-aria/utils";
+import '../../assets/Popover.css';const popoverWrapper = "_popoverWrapper_qrzbw_1";
+const popover = "_popover_qrzbw_1";
+const arrow = "_arrow_qrzbw_16";
+const styles = {
+  popoverWrapper,
+  popover,
+  arrow
+};
+const Popover = ({
+  children,
+  state,
+  arrowDirection = "bottom",
+  triggerRef,
+  hasArrow = true
+}) => {
+  const popoverRef = useRef(null);
+  const [optimalPlacement, setOptimalPlacement] = React.useState(arrowDirection);
+  useEffect(() => {
+    const updatePlacement = () => {
+      if (!popoverRef.current || !triggerRef.current) return;
+      const popoverRect = popoverRef.current.getBoundingClientRect();
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const viewportWidth = window.innerWidth;
+      let newPlacement = arrowDirection;
+      if (arrowDirection === "bottom" && triggerRect.bottom + popoverRect.height > viewportHeight) {
+        newPlacement = "top";
+      } else if (arrowDirection === "top" && triggerRect.top - popoverRect.height < 0) {
+        newPlacement = "bottom";
+      }
+      if (arrowDirection === "right" && triggerRect.right + popoverRect.width > viewportWidth) {
+        newPlacement = "left";
+      } else if (arrowDirection === "left" && triggerRect.left - popoverRect.width < 0) {
+        newPlacement = "right";
+      }
+      setOptimalPlacement(newPlacement);
+    };
+    updatePlacement();
+    window.addEventListener("resize", updatePlacement);
+    return () => window.removeEventListener("resize", updatePlacement);
+  }, [arrowDirection, popoverRef.current]);
+  const {
+    popoverProps,
+    arrowProps,
+    placement
+  } = usePopover({
+    popoverRef,
+    triggerRef,
+    offset: 12,
+    placement: optimalPlacement,
+    shouldFlip: true
+  }, state);
+  return /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx("div", { className: styles.popoverWrapper, children: /* @__PURE__ */ jsx(FocusScope, { restoreFocus: true, contain: true, children: /* @__PURE__ */ jsxs("div", { ...mergeProps(popoverProps), ref: popoverRef, className: styles.popover, children: [
+    /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
+    children,
+    hasArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, className: styles.arrow, "data-placement": placement })
+  ] }) }) }) });
+};
+export {
+  Popover,
+  Popover as default
+};
+//# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map

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

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

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

package/dist/components/Popover/index.js

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

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

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

package/dist/components/Section/Section.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
-import { BackgroundVariants } from '../../utils/backgroundColour/backgroundColour';
+import { BackgroundVariants } from '../../utils/backgroundColor/backgroundColor';
 import { PaddingVariants } from '../../utils/padding/padding';
-type SectionPaddingValue = "default" | PaddingVariants['paddingX'];
+type SectionPaddingValue = 'default' | PaddingVariants['paddingX'];
 type SectionPadding = {
     paddingX?: SectionPaddingValue;
     paddingY?: SectionPaddingValue;
@@ -14,6 +14,7 @@ export interface SectionProps extends BackgroundVariants, SectionPadding {
     children: React.ReactNode;
     containerMaxWidth?: 'full-width' | 'page';
     style?: React.CSSProperties;
+    backgroundColour?: BackgroundVariants['backgroundColor'];
     className?: string;
 }
 interface ContainerProps {
@@ -21,7 +22,7 @@ interface ContainerProps {
     className?: string;
     containerMaxWidth?: 'full-width' | 'page';
 }
-declare const Container: ({ children, className, containerMaxWidth }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Container: ({ children, className, containerMaxWidth, }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
 interface SectionComponent extends React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>> {
     Container: typeof Container;
 }

package/dist/components/Section/Section.js

@@ -1,23 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
-import { backgroundColorVariants } from "../../utils/backgroundColour/backgroundColour.js";
+import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundColor.js";
 import { paddingVariants } from "../../utils/padding/padding.js";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import '../../assets/Section.css';const section = "_section_dk7qx_1";
-const container = "_container_dk7qx_8";
-const pageWidth = "_pageWidth_dk7qx_16";
-const fullWidth = "_fullWidth_dk7qx_20";
-const paddingTopDefault = "_paddingTopDefault_dk7qx_34";
-const paddingRightDefault = "_paddingRightDefault_dk7qx_38";
-const paddingBottomDefault = "_paddingBottomDefault_dk7qx_42";
-const paddingLeftDefault = "_paddingLeftDefault_dk7qx_46";
+import '../../assets/Section.css';const section = "_section_1lo00_1";
+const container = "_container_1lo00_8";
+const pageWidth = "_pageWidth_1lo00_16";
+const fullWidth = "_fullWidth_1lo00_20";
+const paddingTopDefault = "_paddingTopDefault_1lo00_34";
+const paddingRightDefault = "_paddingRightDefault_1lo00_38";
+const paddingBottomDefault = "_paddingBottomDefault_1lo00_42";
+const paddingLeftDefault = "_paddingLeftDefault_1lo00_46";
 const styles = {
   section,
   container,
   pageWidth,
   fullWidth,
-  "paddingX-default": "_paddingX-default_dk7qx_24",
-  "paddingY-default": "_paddingY-default_dk7qx_29",
+  "paddingX-default": "_paddingX-default_1lo00_24",
+  "paddingY-default": "_paddingY-default_1lo00_29",
   paddingTopDefault,
   paddingRightDefault,
   paddingBottomDefault,
@@ -54,15 +54,20 @@ const Section = forwardRef(({
   children,
   containerMaxWidth = "page",
   backgroundColour,
+  backgroundColor,
   paddingTop,
   paddingBottom,
   paddingLeft,
   paddingRight,
-  paddingX = "default",
+  paddingX,
   paddingY = "default",
   style,
   className
 }, ref) => {
+  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;
   return /* @__PURE__ */ jsx("section", { ref, className: `
         ${styles.section}
         ${paddingVariants({
@@ -82,7 +87,7 @@ const Section = forwardRef(({
     paddingY: paddingY === "default" ? "default" : void 0
   })}
         ${backgroundColorVariants({
-    backgroundColour
+    backgroundColor: resolvedBackgroundColor
   })} 
         ${className || ""}
       `.trim(), style, children: React.Children.map(children, (child) => {

package/dist/components/Section/Section.js.map

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

package/dist/components/SelectNative/SelectNative.d.ts

@@ -0,0 +1,56 @@
+import { ValidationResult } from 'react-aria-components';
+export interface SelectNativeOption {
+    label: string;
+    value: string;
+}
+export interface SelectNativeProps {
+    /**
+     * The label for the SelectNative
+     */
+    label?: string;
+    /**
+     * The description for the SelectNative
+     */
+    description?: string;
+    /**
+     * The error message for the SelectNative
+     */
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    /**
+     * Whether the SelectNative is invalid
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the SelectNative is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the SelectNative is required
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Placeholder text when no option is selected
+     */
+    placeholder?: string;
+    /**
+     * The options for the SelectNative
+     */
+    options: SelectNativeOption[];
+    /**
+     * The default selected value
+     */
+    defaultValue?: string;
+    /**
+     * The current value (for controlled components)
+     */
+    value?: string;
+    /**
+     * Optional ID for the select element. If not provided, one will be generated.
+     */
+    id?: string;
+}
+export declare const SelectNative: ({ label, description, errorMessage, isInvalid, isDisabled, isRequired, placeholder, options, defaultValue, value, id: providedId, ...props }: SelectNativeProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectNative;

package/dist/components/SelectNative/SelectNative.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { TextField } from "react-aria-components";
+import { useId } from "react";
+import { FieldHeader } from "../FieldHeader/FieldHeader.js";
+import '../../assets/SelectNative.css';const select = "_select_2fygw_1";
+const selectInput = "_selectInput_2fygw_10";
+const styles = {
+  select,
+  selectInput
+};
+const SelectNative = ({
+  label,
+  description,
+  errorMessage,
+  isInvalid = false,
+  isDisabled = false,
+  isRequired = false,
+  placeholder,
+  options,
+  defaultValue,
+  value,
+  id: providedId,
+  ...props
+}) => {
+  const uniqueId = useId();
+  const id = providedId || `select-${uniqueId}`;
+  const showPlaceholder = !defaultValue && !value;
+  return /* @__PURE__ */ jsxs(TextField, { className: styles.select, defaultValue, value, isDisabled, isInvalid, ...props, children: [
+    label && /* @__PURE__ */ jsx(FieldHeader, { label, description, isInvalid, isRequired, errorMessage, labelFor: id }),
+    /* @__PURE__ */ jsxs("select", { id, className: styles.selectInput, defaultValue, value, disabled: isDisabled, required: isRequired, "aria-invalid": isInvalid, children: [
+      showPlaceholder && placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+      options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+    ] })
+  ] });
+};
+export {
+  SelectNative,
+  SelectNative as default
+};
+//# sourceMappingURL=SelectNative.js.map

package/dist/components/SelectNative/SelectNative.js.map

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

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

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

package/dist/components/SelectNative/index.js

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

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

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

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

@@ -0,0 +1,33 @@
+export type SliderMode = 'numeric' | 'currency' | 'duration' | 'time';
+export interface CurrencyFormatOptions extends Omit<Intl.NumberFormatOptions, 'style'> {
+    currency: string;
+    locale?: string;
+}
+type FormatOptions = Intl.NumberFormatOptions | ((value: number, maxValue?: number) => string);
+type BaseSliderProps = {
+    label?: string;
+    description?: string;
+    isDisabled?: boolean;
+    isRange?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    step?: number;
+    formatOptions?: FormatOptions;
+    id?: string;
+    showTooltip?: boolean;
+};
+type SingleSliderProps = BaseSliderProps & {
+    isRange?: false;
+    defaultValue?: number;
+    value?: number;
+    onChange?: (value: number) => void;
+};
+type RangeSliderProps = BaseSliderProps & {
+    isRange: true;
+    defaultValue?: [number, number];
+    value?: [number, number];
+    onChange?: (value: [number, number]) => void;
+};
+export type SliderProps = SingleSliderProps | RangeSliderProps;
+export declare const Slider: ({ label, description, isDisabled, isRange, minValue, maxValue, step, formatOptions, defaultValue, value, id: providedId, onChange, showTooltip, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export default Slider;