@alto-avios/alto-ui 4.0.0 → 4.2.0

package/dist/components/SelectCard/SelectCard.js

@@ -2,26 +2,27 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React__default, { 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";
+import '../../assets/SelectCard.css';const checkboxSvgWrapper = "_checkboxSvgWrapper_1xxiy_53";
+const svg = "_svg_1xxiy_138";
 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",
+  "select-card": "_select-card_1xxiy_1",
+  "select-card__header": "_select-card__header_1xxiy_46",
   checkboxSvgWrapper,
+  "select-card__start-slot": "_select-card__start-slot_1xxiy_58",
+  "select-card__label-title": "_select-card__label-title_1xxiy_63",
+  "select-card__label": "_select-card__label_1xxiy_63",
+  "select-card__end-slot": "_select-card__end-slot_1xxiy_87",
+  "select-card__body": "_select-card__body_1xxiy_99",
+  "select-card__details": "_select-card__details_1xxiy_110",
+  "select-card__checkbox": "_select-card__checkbox_1xxiy_124",
   svg,
-  "select-card__radio": "_select-card__radio_dir9q_183"
+  "select-card__radio": "_select-card__radio_1xxiy_208"
 };
 const SelectCardContext = createContext({});
 const SelectCard = ({
   children,
   type = "checkbox",
+  hasSelectControl = true,
   ...contextProps
 }) => {
   const labelId = React__default.useId();
@@ -29,20 +30,22 @@ const SelectCard = ({
     return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: {
       type,
       "aria-labelledby": labelId,
+      hasSelectControl,
       ...contextProps
-    }, children: /* @__PURE__ */ jsx(Checkbox, { className: `${styles["select-card"]} ${styles["select-card__checkbox"]}`, ...contextProps, "aria-labelledby": labelId, children }) });
+    }, children: /* @__PURE__ */ jsx(Checkbox, { className: `${styles["select-card"]} ${styles["select-card__checkbox"]}`, ...contextProps, "aria-labelledby": labelId, "data-select-control": hasSelectControl, children }) });
   }
   return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: {
     "aria-labelledby": labelId,
+    hasSelectControl,
     ...contextProps
-  }, children: /* @__PURE__ */ jsx(Radio, { className: `${styles["select-card"]} ${styles["select-card__radio"]}`, ...contextProps, "aria-labelledby": labelId, children }) });
+  }, children: /* @__PURE__ */ jsx(Radio, { className: `${styles["select-card"]} ${styles["select-card__radio"]}`, ...contextProps, isDisabled: contextProps.isDisabled, "aria-labelledby": labelId, "data-select-control": hasSelectControl, 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: [
+    return /* @__PURE__ */ jsxs("div", { className: styles["select-card__header"], "data-select-control": state == null ? void 0 : state.hasSelectControl, 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
     ] });
@@ -57,11 +60,13 @@ const EndSlot = ({
 }) => /* @__PURE__ */ jsx("div", { className: styles["select-card__end-slot"], children });
 const Label = ({
   title,
-  description
+  description,
+  headingLevel
 }) => {
   const state = useContext(SelectCardContext);
+  const HeadingLabel = headingLevel || "h3";
   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(HeadingLabel, { 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 })
   ] });
 };

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

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

package/dist/components/SelectNative/SelectNative.js

@@ -2,8 +2,9 @@ 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";
+import { useFocusRing } from "@react-aria/focus";
+import '../../assets/SelectNative.css';const select = "_select_16vwh_1";
+const selectInput = "_selectInput_16vwh_10";
 const styles = {
   select,
   selectInput
@@ -24,6 +25,10 @@ const SelectNative = ({
   ...props
 }) => {
   const uniqueId = useId();
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing();
   const id = providedId || `select-${uniqueId}`;
   const showPlaceholder = !defaultValue && !value;
   const handleChange = (event) => {
@@ -33,7 +38,7 @@ const SelectNative = ({
   };
   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, onChange: handleChange, children: [
+    /* @__PURE__ */ jsxs("select", { id, className: styles.selectInput, defaultValue, value, disabled: isDisabled, required: isRequired, "aria-invalid": isInvalid, onChange: handleChange, "data-focus-visible": isFocusVisible ? true : void 0, ...focusProps, 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))
     ] })

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

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

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

@@ -6,39 +6,114 @@ export interface CurrencyFormatOptions extends Omit<Intl.NumberFormatOptions, 's
 }
 export type FormatOptions = Intl.NumberFormatOptions | ((value: number, maxValue?: number) => string);
 export type BaseSliderProps = {
+    /**
+     * The label for the slider.
+     */
     label?: string;
+    /**
+     * The description for the slider.
+     */
     description?: string;
+    /**
+     * Whether the slider is disabled.
+     */
     isDisabled?: boolean;
+    /**
+     * Whether the slider is a range slider.
+     */
     isRange?: boolean;
+    /**
+     * The minimum value for the slider.
+     */
     minValue?: number;
+    /**
+     * The maximum value for the slider.
+     */
     maxValue?: number;
+    /**
+     * The step value for the slider.
+     */
     step?: number;
+    /**
+     * The format options for the slider.
+     */
     formatOptions?: FormatOptions;
+    /**
+     * The id for the slider.
+     */
     id?: string;
+    /**
+     * Whether to show the tooltip.
+     */
     showTooltip?: boolean;
 };
 export type SingleSliderProps = BaseSliderProps & {
     isRange?: false;
+    /**
+     * The default value for the single slider.
+     */
     defaultValue?: number;
+    /**
+     * The value for the single slider.
+     */
     value?: number;
+    /**
+     * The onChange handler for the single slider.
+     */
     onChange?: (value: number) => void;
 };
 export type RangeSliderProps = BaseSliderProps & {
     isRange: true;
+    /**
+     * The default value for the range slider.
+     */
     defaultValue?: [number, number];
+    /**
+     * The value for the range slider.
+     */
     value?: [number, number];
+    /**
+     * The onChange handler for the range slider.
+     */
     onChange?: (value: [number, number]) => void;
 };
 export type SliderProps = SingleSliderProps | RangeSliderProps;
 export interface CustomThumbProps {
+    /**
+     * The index of the thumb.
+     */
     index: number;
+    /**
+     * The state of the slider.
+     */
     state: SliderRenderProps['state'];
+    /**
+     * The format value for the slider.
+     */
     formatValue: (val: number) => string;
+    /**
+     * Whether the slider is disabled.
+     */
     isDisabled?: boolean;
+    /**
+     * Whether to show the tooltip.
+     */
     showTooltip?: boolean;
+    /**
+     * The label for the slider.
+     */
     label: string;
+    /**
+     * The minimum value for the slider.
+     */
     minValue: number;
+    /**
+     * The maximum value for the slider.
+     */
     maxValue: number;
+    /**
+     * Whether the slider is a range slider.
+     */
     isRange?: boolean;
 }
 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;

package/dist/components/Spacer/Spacer.js

@@ -83,7 +83,7 @@ const Spacer = ({
   debugVisible: debugVisible2,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx("span", { className: `${spacerVariants(props)} ${debugVisible2 ? styles.debugVisible : ""}` });
+  return /* @__PURE__ */ jsx("span", { className: `${spacerVariants(props)} ${debugVisible2 ? styles.debugVisible : ""}`, "aria-hidden": "true", role: "presentation" });
 };
 export {
   Spacer,

package/dist/components/Tabs/Tab.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export interface TabProps {
+    /** Unique identifier for the tab */
+    id: string;
+    /** Tab label content */
+    children: React.ReactNode;
+    /** Icon name to display in the tab */
+    iconName?: string;
+    /** URL to navigate to when tab is clicked (for link tabs) */
+    href?: string;
+    /** Whether the tab is disabled */
+    isDisabled?: boolean;
+    /** Additional CSS class names
+     * @ignore
+     * */
+    className?: string;
+}
+export declare const Tab: React.FC<TabProps>;
+export default Tab;

package/dist/components/Tabs/Tab.js

@@ -0,0 +1,12 @@
+import "react/jsx-runtime";
+import "react-aria-components";
+import "../Heading/Heading.js";
+import "../Icon/Icon.js";
+import { Tab, Tab as Tab2 } from "./Tabs.js";
+import "../../utils/focus/focusStyles.js";
+import "../../TabPanel-DNAQ5FkE.js";
+export {
+  Tab,
+  Tab2 as default
+};
+//# sourceMappingURL=Tab.js.map

package/dist/components/Tabs/Tab.js.map

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

package/dist/components/Tabs/TabList.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const tabList: (props?: ({
+    fillContainer?: boolean | null | undefined;
+    hasScrollButtons?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TabListProps extends Omit<VariantProps<typeof tabList>, 'hasScrollButtons'> {
+    /** Tab components to render */
+    children: React.ReactNode;
+    /** Additional CSS class names
+     * @ignore
+     */
+    className?: string;
+}
+export declare const TabList: React.FC<TabListProps>;
+export default TabList;

package/dist/components/Tabs/TabList.js

@@ -0,0 +1,12 @@
+import "react/jsx-runtime";
+import "react";
+import "react-aria-components";
+import "../../index-DdUYounA.js";
+import "../Carousel/CarouselButton/CarouselButton.js";
+import { TabList, TabList as TabList2 } from "./Tabs.js";
+import "../../TabPanel-DNAQ5FkE.js";
+export {
+  TabList,
+  TabList2 as default
+};
+//# sourceMappingURL=TabList.js.map

package/dist/components/Tabs/TabList.js.map

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

package/dist/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { Key } from 'react-aria-components';
+export interface TabPanelProps {
+    /** Unique identifier that matches a Tab id */
+    id: Key;
+    /** Panel content to display when tab is selected */
+    children: React.ReactNode;
+    /** Additional CSS class names
+     * @ignore
+     * */
+    className?: string;
+}
+export declare const TabPanel: React.FC<TabPanelProps>;
+export default TabPanel;

package/dist/components/Tabs/TabPanel.js

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "react-aria-components";
+import { T, T as T2 } from "../../TabPanel-DNAQ5FkE.js";
+export {
+  T as TabPanel,
+  T2 as default
+};
+//# sourceMappingURL=TabPanel.js.map

package/dist/components/Tabs/TabPanel.js.map

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

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+import { Key } from 'react-aria-components';
+import { VariantProps } from 'class-variance-authority';
+declare const tabs: (props?: ({
+    styleVariant?: "heading" | "line" | "pill" | "contained" | null | undefined;
+    align?: "center" | "start" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TabsProps extends VariantProps<typeof tabs> {
+    /** Tab components and panels OR routes content */
+    children?: React.ReactNode;
+    /** Visual style variant of the tabs */
+    styleVariant?: 'line' | 'pill' | 'contained' | 'heading';
+    /** Horizontal alignment of tab list */
+    align?: 'start' | 'center';
+    /** Whether tabs should fill the available width */
+    fillContainer?: boolean;
+    /** Focus outline color style for accessibility */
+    focusStyle?: 'default' | 'white';
+    /** Heading level for heading variant tabs */
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Currently selected tab key for controlled component */
+    selectedKey?: Key;
+    /** Default selected tab key for uncontrolled component */
+    defaultSelectedKey?: Key;
+    /** Array of tab keys that should be disabled */
+    disabledKeys?: Key[];
+    /** Callback fired when a tab is selected */
+    onSelectionChange?: (key: Key) => void;
+    /**
+     * Route content to display when using tabs as navigation links
+     * When provided, replaces individual TabPanel children with a single routing container
+     * Typically used with React Router or similar routing solutions
+     */
+    routes?: React.ReactNode;
+}
+export interface TabsContextValue {
+    styleVariant: 'line' | 'pill' | 'contained' | 'heading';
+    align: 'start' | 'center';
+    fillContainer: boolean;
+    focusStyle: 'default' | 'white';
+    headingLevel: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+export declare const useTabsContext: () => TabsContextValue;
+export declare const Tabs: React.FC<TabsProps>;
+export { TabList } from './TabList';
+export { Tab } from './Tab';
+export { TabPanel } from './TabPanel';
+export default Tabs;