@alto-avios/alto-ui 3.0.0 → 3.2.0

package/dist/components/PhoneNumberField/PhoneNumberField.js

@@ -0,0 +1,96 @@
+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_1udln_1";
+const selectHandlerValue = "_selectHandlerValue_1udln_34";
+const selectHandlerIcon = "_selectHandlerIcon_1udln_65";
+const selectWrapper = "_selectWrapper_1udln_77";
+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",
+  label = "Phone number",
+  ...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, label, labelFor: id, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.phoneNumberField, children: [
+    hasCountrySelect && /* @__PURE__ */ jsxs("div", { className: styles.selectWrapper, children: [
+      /* @__PURE__ */ jsx("select", { className: styles.selectInput, ...countryCodeControlled ? {
+        value: countryCodeDefinitive
+      } : {
+        defaultValue: defaultValue == null ? void 0 : defaultValue.value
+      }, 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" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(NumberFormatBase, { id, type: "tel", format: handleFormat, autoComplete: "tel", customInput: Input, getInputRef: inputRef, ...inputProps, onValueChange: (e) => handleInputChange(e.value), value: valueDefinitive, placeholder: props == null ? void 0 : props.placeholder })
+  ] }) });
+};
+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,48 @@
+import { default as React } from 'react';
+import { OverlayTriggerState } from 'react-stately';
+type PlacementType = 'top' | 'top start' | 'top end' | 'right' | 'right top' | 'right bottom' | 'bottom' | 'bottom start' | 'bottom end' | 'left' | 'left top' | 'left bottom';
+type ArrowDirectionType = 'top' | 'right' | 'bottom' | 'left';
+interface InternalPopoverProps {
+    /**
+     * @private Internal use only - placement of the popover
+     * This prop should only be used by internal components like Menu
+     */
+    placement?: PlacementType;
+    /**
+     * @private Internal use only - whether the popover should flip to fit in the viewport
+     * This prop should only be used by internal components like Menu
+     */
+    shouldFlip?: boolean;
+    /**
+     * @private Internal use only - whether to allow elements outside the popover may be interacted with
+     * This prop should only be used by internal components like Menu
+     */
+    isNonModal?: boolean;
+    /**
+     * @private Internal use only - whether to allow tabbing out of the popover
+     * This prop should only be used by internal components like Menu
+     */
+    allowTabOut?: boolean;
+    /**
+     * @private Internal use only - whether to auto-focus elements within the popover
+     * This prop should only be used by internal components like Menu
+     */
+    autoFocus?: boolean;
+}
+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 arrow that points to the trigger element */
+    arrowDirection?: ArrowDirectionType;
+    /** Reference to the trigger element that opens the popover */
+    triggerRef: React.RefObject<HTMLButtonElement> | {
+        current: HTMLElement;
+    };
+    /** Whether to show the directional arrow on the popover */
+    hasArrow?: boolean;
+}
+type CombinedPopoverProps = PopoverProps & InternalPopoverProps;
+export declare const Popover: ({ children, state, arrowDirection, triggerRef, hasArrow, placement, shouldFlip, isNonModal, allowTabOut, autoFocus, }: CombinedPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export default Popover;

package/dist/components/Popover/Popover.js

@@ -0,0 +1,65 @@
+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 '../../assets/Popover.css';const popoverWrapper = "_popoverWrapper_qrzbw_1";
+const popover = "_popover_qrzbw_1";
+const arrow = "_arrow_qrzbw_16";
+const styles = {
+  popoverWrapper,
+  popover,
+  arrow
+};
+const arrowDirectionToPlacement = {
+  top: "top",
+  right: "right",
+  bottom: "bottom",
+  left: "left"
+};
+const Popover = ({
+  children,
+  state,
+  arrowDirection = "bottom",
+  triggerRef,
+  hasArrow = true,
+  placement,
+  shouldFlip = true,
+  isNonModal = false,
+  allowTabOut = false,
+  autoFocus = false
+}) => {
+  const popoverRef = useRef(null);
+  const initialPlacement = placement || arrowDirectionToPlacement[arrowDirection];
+  const [optimalPlacement, setOptimalPlacement] = React.useState(initialPlacement);
+  useEffect(() => {
+    const updatePlacement = () => {
+      if (!popoverRef.current || !triggerRef.current) return;
+      setOptimalPlacement(initialPlacement);
+    };
+    updatePlacement();
+    window.addEventListener("resize", updatePlacement);
+    return () => window.removeEventListener("resize", updatePlacement);
+  }, [initialPlacement, popoverRef.current]);
+  const {
+    popoverProps,
+    arrowProps,
+    placement: finalPlacement
+  } = usePopover({
+    popoverRef,
+    triggerRef,
+    offset: 12,
+    placement: optimalPlacement,
+    shouldFlip,
+    isNonModal
+  }, state);
+  return /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx("div", { className: styles.popoverWrapper, children: /* @__PURE__ */ jsx(FocusScope, { restoreFocus: true, contain: !allowTabOut, autoFocus, children: /* @__PURE__ */ jsxs("div", { ...popoverProps, ref: popoverRef, className: styles.popover, children: [
+    /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
+    children,
+    hasArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, className: styles.arrow, "data-placement": finalPlacement })
+  ] }) }) }) });
+};
+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/Radio/index.d.ts

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

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

@@ -1,5 +1,5 @@
 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 SectionPadding = {
@@ -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 {

package/dist/components/Section/Section.js

@@ -1,6 +1,6 @@
 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_1lo00_1";
@@ -54,6 +54,7 @@ const Section = forwardRef(({
   children,
   containerMaxWidth = "page",
   backgroundColour,
+  backgroundColor,
   paddingTop,
   paddingBottom,
   paddingLeft,
@@ -63,6 +64,10 @@ const Section = forwardRef(({
   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/SelectCard/SelectCard.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { CheckboxProps } from 'react-aria-components';
+import { RadioProps } from '../Radio';
+type SelectCardContextType = {
+    /**
+     * The input type of the select card.
+     * @default 'checkbox'
+     */
+    type?: 'checkbox' | 'radio';
+    /**
+     * The ID of the title for a11y labelling.
+     * @default useId()
+     */
+    'aria-labelledby'?: string;
+} & (({
+    type?: 'checkbox';
+} & Omit<CheckboxProps, 'children' | 'focusStyle'>) | ({
+    type: 'radio';
+} & Omit<RadioProps, 'children' | 'focusStyle'>));
+type SelectCardProps = SelectCardContextType & {
+    /**
+     * The compounds components of the SelectCard:
+     * - SelectCard.Header
+     * - SelectCard.StartSlot
+     * - SelectCard.EndSlot
+     * - SelectCard.Label
+     * - SelectCard.Body
+     * - SelectCard.Details
+     */
+    children?: React.ReactNode;
+};
+declare const SelectCard: {
+    ({ children, type, ...contextProps }: SelectCardProps): import("react/jsx-runtime").JSX.Element;
+    Header: ({ children }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    StartSlot: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+    EndSlot: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ title, description }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+    Details: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+};
+interface HeaderProps {
+    children?: React.ReactNode;
+}
+interface SlotProps {
+    children: React.ReactNode;
+}
+interface LabelProps {
+    title: string;
+    description?: string;
+}
+export default SelectCard;

package/dist/components/SelectCard/SelectCard.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { createContext, useContext } from "react";
+import { Paragraph } from "../Paragraph/Paragraph.js";
+import { Checkbox, Radio } from "react-aria-components";
+import '../../assets/SelectCard.css';const checkboxSvgWrapper = "_checkboxSvgWrapper_dir9q_104";
+const svg = "_svg_dir9q_118";
+const styles = {
+  "select-card": "_select-card_dir9q_1",
+  "select-card__header": "_select-card__header_dir9q_30",
+  "select-card__start-slot": "_select-card__start-slot_dir9q_38",
+  "select-card__label-title": "_select-card__label-title_dir9q_43",
+  "select-card__label": "_select-card__label_dir9q_43",
+  "select-card__end-slot": "_select-card__end-slot_dir9q_67",
+  "select-card__body": "_select-card__body_dir9q_79",
+  "select-card__details": "_select-card__details_dir9q_90",
+  "select-card__checkbox": "_select-card__checkbox_dir9q_104",
+  checkboxSvgWrapper,
+  svg,
+  "select-card__radio": "_select-card__radio_dir9q_183"
+};
+const SelectCardContext = createContext({});
+const SelectCard = ({
+  children,
+  type = "checkbox",
+  ...contextProps
+}) => {
+  const labelId = React.useId();
+  if (type === "checkbox") {
+    return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: {
+      type,
+      "aria-labelledby": labelId,
+      ...contextProps
+    }, children: /* @__PURE__ */ jsx(Checkbox, { className: `${styles["select-card"]} ${styles["select-card__checkbox"]}`, ...contextProps, "aria-labelledby": labelId, children }) });
+  }
+  return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: {
+    "aria-labelledby": labelId,
+    ...contextProps
+  }, children: /* @__PURE__ */ jsx(Radio, { className: `${styles["select-card"]} ${styles["select-card__radio"]}`, ...contextProps, "aria-labelledby": labelId, children }) });
+};
+const Header = ({
+  children
+}) => {
+  const state = useContext(SelectCardContext);
+  if ((state == null ? void 0 : state.type) === "checkbox") {
+    return /* @__PURE__ */ jsxs("div", { className: styles["select-card__header"], children: [
+      /* @__PURE__ */ jsx("div", { className: `${styles.checkboxSvgWrapper}`, "data-disabled": state == null ? void 0 : state.isDisabled, children: /* @__PURE__ */ jsx("svg", { className: styles.svg, viewBox: "0 0 18 18", "aria-hidden": "true", children: (state == null ? void 0 : state.isIndeterminate) ? /* @__PURE__ */ jsx("rect", { x: 1, y: 7.5, width: 15, height: 3 }) : /* @__PURE__ */ jsx("polyline", { points: "1 9 7 14 15 4" }) }) }),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: styles["select-card__header"], children });
+};
+const StartSlot = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: styles["select-card__start-slot"], children });
+const EndSlot = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: styles["select-card__end-slot"], children });
+const Label = ({
+  title,
+  description
+}) => {
+  const state = useContext(SelectCardContext);
+  return /* @__PURE__ */ jsxs("div", { className: styles["select-card__label"], children: [
+    /* @__PURE__ */ jsx("div", { className: styles["select-card__label-title"], id: state == null ? void 0 : state["aria-labelledby"], children: title }),
+    /* @__PURE__ */ jsx(Paragraph, { size: "sm", foregroundColor: (state == null ? void 0 : state.isDisabled) ? "disabledOnSubtle" : "default", children: description })
+  ] });
+};
+const Body = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: styles["select-card__body"], children });
+const Details = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: styles["select-card__details"], children });
+};
+SelectCard.Header = Header;
+SelectCard.StartSlot = StartSlot;
+SelectCard.EndSlot = EndSlot;
+SelectCard.Label = Label;
+SelectCard.Body = Body;
+SelectCard.Details = Details;
+export {
+  SelectCard as default
+};
+//# sourceMappingURL=SelectCard.js.map

package/dist/components/SelectCard/SelectCard.js.map

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

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

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

package/dist/components/SelectCard/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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;