@lumx/react 3.20.1-alpha.35 → 3.20.1-alpha.36

package/_internal/components/progress/index-6f578c31.js

@@ -0,0 +1,182 @@
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Theme, Size } from '@lumx/core/js/constants';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$2 = 'ProgressLinear';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$2 = {};
+
+/**
+ * ProgressLinear component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ProgressLinear = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    className,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$2,
+      theme
+    })),
+    children: [/*#__PURE__*/jsx("div", {
+      className: "lumx-progress-linear__line1"
+    }), /*#__PURE__*/jsx("div", {
+      className: "lumx-progress-linear__line2"
+    })]
+  });
+});
+ProgressLinear.displayName = COMPONENT_NAME$2;
+ProgressLinear.className = CLASSNAME$2;
+ProgressLinear.defaultProps = DEFAULT_PROPS$2;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'ProgressCircular';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$1 = {
+  size: Size.m,
+  display: 'block'
+};
+
+/**
+ * ProgressCircularProps component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ProgressCircular = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    className,
+    theme = defaultTheme,
+    size = DEFAULT_PROPS$1.size,
+    display = DEFAULT_PROPS$1.display,
+    ...forwardedProps
+  } = props;
+  const Element = display === 'block' ? 'div' : 'span';
+  return /*#__PURE__*/jsxs(Element, {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$1,
+      theme,
+      size,
+      display
+    })),
+    children: [/*#__PURE__*/jsx(Element, {
+      className: "lumx-progress-circular__double-bounce1"
+    }), /*#__PURE__*/jsx(Element, {
+      className: "lumx-progress-circular__double-bounce2"
+    }), /*#__PURE__*/jsx("svg", {
+      className: "lumx-progress-circular__svg",
+      viewBox: "25 25 50 50",
+      children: /*#__PURE__*/jsx("circle", {
+        className: "lumx-progress-circular__path",
+        cx: "50",
+        cy: "50",
+        r: "20",
+        fill: "none",
+        strokeWidth: "5"
+      })
+    })]
+  });
+});
+ProgressCircular.displayName = COMPONENT_NAME$1;
+ProgressCircular.className = CLASSNAME$1;
+ProgressCircular.defaultProps = DEFAULT_PROPS$1;
+
+const ProgressVariant = {
+  linear: 'linear',
+  circular: 'circular'
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Progress';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  variant: ProgressVariant.circular
+};
+
+/**
+ * Progress component.
+ *
+ * @deprecated use `ProgressLinear` and `ProgressCircular` instead.
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Progress = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    className,
+    theme = defaultTheme,
+    variant = DEFAULT_PROPS.variant,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      theme,
+      variant
+    })),
+    children: [variant === ProgressVariant.circular && /*#__PURE__*/jsx(ProgressCircular, {
+      theme: theme
+    }), variant === ProgressVariant.linear && /*#__PURE__*/jsx(ProgressLinear, {
+      theme: theme
+    })]
+  });
+});
+Progress.displayName = COMPONENT_NAME;
+Progress.className = CLASSNAME;
+Progress.defaultProps = DEFAULT_PROPS;
+
+export { Progress, ProgressCircular, ProgressLinear, ProgressVariant };

package/_internal/components/progress-tracker/index-700bc4c2.js

@@ -0,0 +1,309 @@
+import React__default, { useReducer, useEffect, useCallback } from 'react';
+import { r as reducer, I as INIT_STATE, T as TabProviderContext, u as useTabProviderContextState, a as useTabProviderContext } from '../../825ac334.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { m as mergeRefs } from '../../f0d7d6ea.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { u as useRovingTabIndex } from '../../7daf0f24.js';
+import { useDisableStateProps } from '../../utils/disabled/index-075b99c3.js';
+import { I as Icon, m as mdiAlertCircle } from '../../bace1bf1.js';
+import { Size, Kind, CSS_PREFIX } from '@lumx/core/js/constants';
+import { InputLabel } from '../input-label/index-0113f382.js';
+import { InputHelper } from '../input-helper/index-5a837e7c.js';
+import { m as mdiCheckCircle } from '../../de24f857.js';
+import '../../d0e3f49e.js';
+
+const mdiRadioboxBlank = 'M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';
+
+const mdiRadioboxMarked = 'M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 5a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5';
+
+const DEFAULT_PROPS$3 = {
+  isLazy: INIT_STATE.isLazy,
+  shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
+};
+
+/**
+ * This component provides a context in which steps can be defined and linked to their step panel.
+ *
+ * It does not produce any markup so you can wrap it around any React elements and then split the ProgressTracker and ProgressTrackerPanel
+ * components in the react tree.
+ *
+ * This works exactly as TabProvider so it uses TabProviderContext and tabs state.
+ *
+ * @param  props React component props.
+ * @return React element.
+ */
+const ProgressTrackerProvider = props => {
+  const {
+    children,
+    onChange,
+    ...propState
+  } = props;
+  const [state, dispatch] = useReducer(reducer, INIT_STATE);
+
+  // On prop state change => dispatch update.
+  useEffect(() => {
+    dispatch({
+      type: 'update',
+      payload: {
+        ...DEFAULT_PROPS$3,
+        ...propState,
+        activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex
+      }
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [dispatch, ...Object.values(propState)]);
+
+  // On active tab index state change => send update to the onChange.
+  useEffect(() => {
+    if (state === INIT_STATE || !onChange || propState.activeStepIndex === state.activeTabIndex) {
+      return;
+    }
+    onChange(state.activeTabIndex);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [onChange, state.activeTabIndex]);
+  return /*#__PURE__*/jsx(TabProviderContext.Provider, {
+    value: [state, dispatch],
+    children: children
+  });
+};
+ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$3;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$2 = 'ProgressTracker';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$2 = {};
+
+/**
+ * ProgressTracker component.
+ *
+ * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ProgressTracker = forwardRef((props, ref) => {
+  const {
+    'aria-label': ariaLabel,
+    children,
+    className,
+    ...forwardedProps
+  } = props;
+  const stepListRef = React__default.useRef(null);
+  useRovingTabIndex({
+    parentRef: stepListRef,
+    elementSelector: '[role="tab"]',
+    keepTabIndex: false,
+    extraDependencies: [children]
+  });
+  const state = useTabProviderContextState();
+  const numberOfSteps = state?.ids?.tab?.length || 0;
+  const backgroundPosition = numberOfSteps > 0 ? 100 / (numberOfSteps * 2) : 0;
+  const trackPosition = numberOfSteps > 0 ? 100 / (numberOfSteps - 1) * (state?.activeTabIndex || 0) / 100 : 0;
+  return /*#__PURE__*/jsxs("div", {
+    ref: mergeRefs(ref, stepListRef),
+    ...forwardedProps,
+    className: classNames(className, CLASSNAME$2),
+    children: [/*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME$2}__steps`,
+      role: "tablist",
+      "aria-label": ariaLabel,
+      children: children
+    }), /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME$2}__background-bar`,
+      style: {
+        left: `${backgroundPosition}%`,
+        right: `${backgroundPosition}%`
+      }
+    }), /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME$2}__foreground-bar`,
+      style: {
+        left: `${backgroundPosition}%`,
+        right: `${backgroundPosition}%`,
+        transform: `scaleX(${trackPosition})`
+      }
+    })]
+  });
+});
+ProgressTracker.displayName = COMPONENT_NAME$2;
+ProgressTracker.className = CLASSNAME$2;
+ProgressTracker.defaultProps = DEFAULT_PROPS$2;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'ProgressTrackerStep';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$1 = {};
+
+/**
+ * ProgressTrackerStep component.
+ *
+ * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ProgressTrackerStep = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    className,
+    hasError,
+    helper,
+    id,
+    isActive: propIsActive,
+    isComplete,
+    label,
+    onFocus,
+    onKeyPress,
+    tabIndex = -1,
+    ...forwardedProps
+  } = otherProps;
+  const state = useTabProviderContext('tab', id);
+  const isActive = propIsActive || state?.isActive;
+  const changeToCurrentTab = useCallback(() => {
+    if (isAnyDisabled) {
+      return;
+    }
+    state?.changeToTab();
+  }, [isAnyDisabled, state]);
+  const handleFocus = useCallback(event => {
+    onFocus?.(event);
+    if (state?.shouldActivateOnFocus) {
+      changeToCurrentTab();
+    }
+  }, [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus]);
+  const handleKeyPress = useCallback(event => {
+    onKeyPress?.(event);
+    if (event.key !== 'Enter') {
+      return;
+    }
+    changeToCurrentTab();
+  }, [changeToCurrentTab, onKeyPress]);
+  const getIcon = () => {
+    if (isComplete) {
+      return mdiCheckCircle;
+    }
+    if (isActive) {
+      return hasError ? mdiAlertCircle : mdiRadioboxMarked;
+    }
+    return mdiRadioboxBlank;
+  };
+  return /*#__PURE__*/jsxs("button", {
+    ref: ref,
+    ...forwardedProps,
+    type: "button",
+    id: state?.tabId,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$1,
+      hasError,
+      isActive,
+      isClickable: state && !isAnyDisabled,
+      isComplete
+    })),
+    onClick: changeToCurrentTab,
+    onKeyPress: handleKeyPress,
+    onFocus: handleFocus,
+    role: "tab",
+    tabIndex: isActive ? 0 : tabIndex,
+    "aria-disabled": isAnyDisabled,
+    "aria-selected": isActive,
+    "aria-controls": state?.tabPanelId,
+    children: [/*#__PURE__*/jsx(Icon, {
+      className: `${CLASSNAME$1}__state`,
+      icon: getIcon(),
+      size: Size.s
+    }), /*#__PURE__*/jsx(InputLabel, {
+      htmlFor: state?.tabId || '',
+      className: `${CLASSNAME$1}__label`,
+      children: label
+    }), helper && /*#__PURE__*/jsx(InputHelper, {
+      kind: hasError ? Kind.error : Kind.info,
+      className: `${CLASSNAME$1}__helper`,
+      children: helper
+    })]
+  });
+});
+ProgressTrackerStep.displayName = COMPONENT_NAME$1;
+ProgressTrackerStep.className = CLASSNAME$1;
+ProgressTrackerStep.defaultProps = DEFAULT_PROPS$1;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ProgressTrackerStepPanel';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = `${CSS_PREFIX}-step-panel`;
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * ProgressTrackerStepPanel component.
+ *
+ * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ProgressTrackerStepPanel = forwardRef((props, ref) => {
+  const {
+    children,
+    id,
+    className,
+    isActive: propIsActive,
+    ...forwardedProps
+  } = props;
+  const state = useTabProviderContext('tabPanel', id);
+  const isActive = propIsActive || state?.isActive;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    id: state?.tabPanelId,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      isActive
+    })),
+    role: "tabpanel",
+    tabIndex: isActive ? 0 : -1,
+    "aria-labelledby": state?.tabId,
+    children: (!state?.isLazy || isActive) && children
+  });
+});
+ProgressTrackerStepPanel.displayName = COMPONENT_NAME;
+ProgressTrackerStepPanel.className = CLASSNAME;
+ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS;
+
+export { ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel };

package/_internal/{9ae8998a.js → components/radio-button/index-89b725af.js}

@@ -1,23 +1,23 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useId } from './11687649.js';
-import { useTheme } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
-import { useDisableStateProps } from './ef982c3d.js';
+import { u as useId } from '../../3a1facc0.js';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { useDisableStateProps } from '../../utils/disabled/index-075b99c3.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Theme } from '@lumx/core/js/constants';
-import { InputLabel } from './26a92990.js';
-import { InputHelper } from './3119c1fe.js';
+import { InputLabel } from '../input-label/index-0113f382.js';
+import { InputHelper } from '../input-helper/index-5a837e7c.js';
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME = 'RadioButton';
+const COMPONENT_NAME$1 = 'RadioButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
 
 /**
  * Component default props.
@@ -67,14 +67,14 @@ const RadioButton = forwardRef((props, ref) => {
       isChecked,
       isDisabled: isAnyDisabled,
       isUnchecked: !isChecked,
-      prefix: CLASSNAME,
+      prefix: CLASSNAME$1,
       theme
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME}__input-wrapper`,
+      className: `${CLASSNAME$1}__input-wrapper`,
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
-        className: `${CLASSNAME}__input-native`,
+        className: `${CLASSNAME$1}__input-native`,
         ...disabledStateProps,
         id: inputId,
         type: "radio",
@@ -86,32 +86,64 @@ const RadioButton = forwardRef((props, ref) => {
         "aria-describedby": helper ? `${inputId}-helper` : undefined,
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME}__input-placeholder`,
+        className: `${CLASSNAME$1}__input-placeholder`,
         children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME}__input-background`
+          className: `${CLASSNAME$1}__input-background`
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME}__input-indicator`
+          className: `${CLASSNAME$1}__input-indicator`
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME}__content`,
+      className: `${CLASSNAME$1}__content`,
       children: [label && /*#__PURE__*/jsx(InputLabel, {
         htmlFor: inputId,
         theme: theme,
-        className: `${CLASSNAME}__label`,
+        className: `${CLASSNAME$1}__label`,
         children: label
       }), helper && /*#__PURE__*/jsx(InputHelper, {
         id: `${inputId}-helper`,
         theme: theme,
-        className: `${CLASSNAME}__helper`,
+        className: `${CLASSNAME$1}__helper`,
         children: helper
       })]
     })]
   });
 });
-RadioButton.displayName = COMPONENT_NAME;
-RadioButton.className = CLASSNAME;
+RadioButton.displayName = COMPONENT_NAME$1;
+RadioButton.className = CLASSNAME$1;
 RadioButton.defaultProps = DEFAULT_PROPS;
 
-export { RadioButton };
-//# sourceMappingURL=9ae8998a.js.map
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'RadioGroup';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * RadioGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const RadioGroup = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, CLASSNAME),
+    children: children
+  });
+});
+RadioGroup.displayName = COMPONENT_NAME;
+RadioGroup.className = CLASSNAME;
+
+export { RadioButton, RadioGroup };