@cdx-ui/components 0.3.5 → 0.3.7

package/lib/module/components/Stepper/index.js

@@ -0,0 +1,360 @@
+"use strict";
+
+import { Children, createContext, forwardRef, isValidElement, useContext, useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { Slot, StepperRoot, StepperStep, StepperStepTrigger, dataAttributes, mergeDataAttributes, useStepperContext, useStepperIndex, useStepperStep } from '@cdx-ui/primitives';
+import { CheckCircle } from '@cdx-ui/icons';
+import { cn, flattenChildren, mergeRefs } from '@cdx-ui/utils';
+import { Icon } from '../Icon';
+import { ProgressRing } from '../ProgressCircle/ProgressRing';
+import { getStepperLayout, STEPPER_INDICATOR_SIZE, STEPPER_RING_STROKE_WIDTH, stepperContentVariants, stepperDescriptionVariants, stepperIndicatorCheckVariants, stepperIndicatorDiscVariants, stepperIndicatorNumeralVariants, stepperIndicatorRingVariants, stepperIndicatorVariants, stepperSeparatorVariants, stepperStepBodyVariants, stepperStepLabelVariants, stepperStepMainVariants, stepperStepTriggerVariants, stepperStepVariants, stepperTitleVariants, stepperVariants } from './styles';
+import { useStepperLabelFit } from './useStepperLabelFit';
+import { useStepperRingColors } from './useStepperRingColors';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export { useStepperStep } from '@cdx-ui/primitives';
+const StepperLabelFitContext = /*#__PURE__*/createContext('shrink');
+
+/** Counts steps the way `StepperRoot` numbers them, so the label-fit decision resets with them. */
+function countSteps(children, asChild) {
+  const source = asChild && /*#__PURE__*/isValidElement(children) ? children.props.children : children;
+  return flattenChildren(source).filter(child => /*#__PURE__*/isValidElement(child)).length;
+}
+const HIDDEN_FROM_AT = {
+  'aria-hidden': true,
+  accessibilityElementsHidden: true,
+  importantForAccessibility: 'no-hide-descendants'
+};
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+const StepperRootComponent = /*#__PURE__*/forwardRef(({
+  className,
+  style,
+  orientation = 'vertical',
+  labelPlacement = 'end',
+  children,
+  ...props
+}, ref) => {
+  const layout = getStepperLayout(orientation, labelPlacement);
+  const {
+    fit,
+    measureRef
+  } = useStepperLabelFit(layout === 'horizontal-end', countSteps(children, props.asChild));
+  const rootRef = useMemo(() => measureRef === undefined ? ref : mergeRefs(ref, measureRef), [ref, measureRef]);
+  return /*#__PURE__*/_jsx(StepperLabelFitContext.Provider, {
+    value: fit,
+    children: /*#__PURE__*/_jsx(StepperRoot, {
+      ref: rootRef,
+      className: cn(stepperVariants({
+        layout
+      }), className),
+      style: style,
+      orientation: orientation,
+      labelPlacement: labelPlacement,
+      ...props,
+      ...mergeDataAttributes(props, dataAttributes({
+        slot: 'stepper'
+      })),
+      children: children
+    })
+  });
+});
+StepperRootComponent.displayName = 'Stepper';
+
+// =============================================================================
+// STEP
+// =============================================================================
+
+function isSlot(child, type) {
+  return /*#__PURE__*/isValidElement(child) && child.type === type;
+}
+const StepperStepComponent = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  children,
+  ...props
+}, ref) => {
+  const {
+    orientation,
+    labelPlacement,
+    count
+  } = useStepperContext();
+  const layout = getStepperLayout(orientation, labelPlacement);
+  const labelFit = useContext(StepperLabelFitContext);
+  const isLast = useStepperIndex() === count - 1;
+  const stepClass = cn(stepperStepVariants({
+    layout,
+    isLast,
+    labelFit
+  }), className);
+  const slotAttributes = mergeDataAttributes(props, dataAttributes({
+    slot: 'stepper-step'
+  }));
+  if (asChild) {
+    return /*#__PURE__*/_jsx(StepperStep, {
+      ref: ref,
+      asChild: true,
+      className: stepClass,
+      style: style,
+      ...props,
+      ...slotAttributes,
+      children: children
+    });
+  }
+
+  // Indicator, Title and Description form the step trigger, which carries the accessible
+  // name; everything else is the body below the title. The Separator sits in the indicator
+  // track: before the main column when vertical, after it when horizontal.
+  const childArray = Children.toArray(children);
+  const indicator = childArray.find(child => isSlot(child, StepperIndicatorComponent));
+  const title = childArray.find(child => isSlot(child, StepperTitleComponent));
+  const description = childArray.find(child => isSlot(child, StepperDescriptionComponent));
+  const separator = childArray.find(child => isSlot(child, StepperSeparatorComponent));
+  const body = childArray.filter(child => !isSlot(child, StepperIndicatorComponent) && !isSlot(child, StepperTitleComponent) && !isSlot(child, StepperDescriptionComponent) && !isSlot(child, StepperSeparatorComponent));
+  const hasLabel = title !== undefined || description !== undefined;
+  return /*#__PURE__*/_jsxs(StepperStep, {
+    ref: ref,
+    className: stepClass,
+    style: style,
+    ...props,
+    ...slotAttributes,
+    children: [layout === 'vertical' ? separator : null, /*#__PURE__*/_jsxs(View, {
+      className: cn(stepperStepMainVariants({
+        layout,
+        labelFit
+      })),
+      children: [/*#__PURE__*/_jsxs(StepperStepTrigger, {
+        className: stepperStepTriggerVariants({
+          layout
+        }),
+        ...dataAttributes({
+          slot: 'stepper-step-trigger'
+        }),
+        children: [indicator, hasLabel ? /*#__PURE__*/_jsxs(View, {
+          className: cn(stepperStepLabelVariants({
+            layout,
+            labelFit
+          })),
+          children: [title, description]
+        }) : null]
+      }), body.length > 0 ? /*#__PURE__*/_jsx(View, {
+        className: stepperStepBodyVariants({
+          layout
+        }),
+        children: body
+      }) : null]
+    }), layout === 'vertical' ? null : separator]
+  });
+});
+StepperStepComponent.displayName = 'Stepper.Step';
+
+// =============================================================================
+// INDICATOR
+// =============================================================================
+
+const StepperIndicatorComponent = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  children,
+  ...props
+}, ref) => {
+  const {
+    index,
+    isCurrent,
+    isComplete,
+    hasProgress,
+    progress
+  } = useStepperStep();
+  const ringColors = useStepperRingColors(isCurrent);
+  const currentAttribute = dataAttributes({
+    current: isCurrent
+  });
+  const indicatorClass = cn(stepperIndicatorVariants(), className);
+  const indicatorAttributes = mergeDataAttributes(props, dataAttributes({
+    slot: 'stepper-indicator',
+    current: isCurrent,
+    complete: isComplete,
+    progress: hasProgress
+  }));
+  if (asChild) {
+    return /*#__PURE__*/_jsx(Slot, {
+      ref: ref,
+      className: indicatorClass,
+      style: style,
+      ...props,
+      ...HIDDEN_FROM_AT,
+      ...indicatorAttributes,
+      children: children
+    });
+  }
+  const hasCustomGlyph = children !== undefined && children !== null;
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: indicatorClass,
+    style: style,
+    ...props,
+    ...HIDDEN_FROM_AT,
+    ...indicatorAttributes,
+    children: [hasProgress ? /*#__PURE__*/_jsx(View, {
+      className: stepperIndicatorRingVariants(),
+      children: /*#__PURE__*/_jsx(ProgressRing, {
+        size: STEPPER_INDICATOR_SIZE,
+        strokeWidth: STEPPER_RING_STROKE_WIDTH,
+        value: progress,
+        trackColor: ringColors.track,
+        indicatorColor: ringColors.indicator
+      })
+    }) : null, isComplete && !hasCustomGlyph ? /*#__PURE__*/_jsx(Icon, {
+      as: CheckCircle,
+      filled: true,
+      className: stepperIndicatorCheckVariants(),
+      ...currentAttribute
+    }) : /*#__PURE__*/_jsx(View, {
+      className: stepperIndicatorDiscVariants(),
+      ...currentAttribute,
+      children: hasCustomGlyph ? children : /*#__PURE__*/_jsx(Text, {
+        className: stepperIndicatorNumeralVariants(),
+        ...currentAttribute,
+        children: String(index + 1)
+      })
+    })]
+  });
+});
+StepperIndicatorComponent.displayName = 'Stepper.Indicator';
+
+// =============================================================================
+// TITLE
+// =============================================================================
+
+const StepperTitleComponent = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const {
+    isCurrent,
+    orientation,
+    labelPlacement
+  } = useStepperStep();
+  const isCentered = getStepperLayout(orientation, labelPlacement) === 'horizontal-bottom';
+  const Comp = asChild ? Slot : Text;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(stepperTitleVariants({
+      isCentered
+    }), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'stepper-title',
+      current: isCurrent
+    }))
+  });
+});
+StepperTitleComponent.displayName = 'Stepper.Title';
+
+// =============================================================================
+// DESCRIPTION
+// =============================================================================
+
+const StepperDescriptionComponent = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const {
+    orientation,
+    labelPlacement
+  } = useStepperStep();
+  const isCentered = getStepperLayout(orientation, labelPlacement) === 'horizontal-bottom';
+  const Comp = asChild ? Slot : Text;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(stepperDescriptionVariants({
+      isCentered
+    }), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'stepper-description'
+    }))
+  });
+});
+StepperDescriptionComponent.displayName = 'Stepper.Description';
+
+// =============================================================================
+// CONTENT
+// =============================================================================
+
+const StepperContentComponent = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(stepperContentVariants(), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'stepper-content'
+    }))
+  });
+});
+StepperContentComponent.displayName = 'Stepper.Content';
+
+// =============================================================================
+// SEPARATOR
+// =============================================================================
+
+const StepperSeparatorComponent = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const {
+    isLast,
+    orientation,
+    labelPlacement
+  } = useStepperStep();
+  if (isLast) {
+    return null;
+  }
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(stepperSeparatorVariants({
+      layout: getStepperLayout(orientation, labelPlacement)
+    }), className),
+    style: style,
+    ...props,
+    ...HIDDEN_FROM_AT,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'stepper-separator'
+    }))
+  });
+});
+StepperSeparatorComponent.displayName = 'Stepper.Separator';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+export const Stepper = Object.assign(StepperRootComponent, {
+  Step: StepperStepComponent,
+  Indicator: StepperIndicatorComponent,
+  Title: StepperTitleComponent,
+  Description: StepperDescriptionComponent,
+  Content: StepperContentComponent,
+  Separator: StepperSeparatorComponent
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/Stepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Children","createContext","forwardRef","isValidElement","useContext","useMemo","Text","View","Slot","StepperRoot","StepperStep","StepperStepTrigger","dataAttributes","mergeDataAttributes","useStepperContext","useStepperIndex","useStepperStep","CheckCircle","cn","flattenChildren","mergeRefs","Icon","ProgressRing","getStepperLayout","STEPPER_INDICATOR_SIZE","STEPPER_RING_STROKE_WIDTH","stepperContentVariants","stepperDescriptionVariants","stepperIndicatorCheckVariants","stepperIndicatorDiscVariants","stepperIndicatorNumeralVariants","stepperIndicatorRingVariants","stepperIndicatorVariants","stepperSeparatorVariants","stepperStepBodyVariants","stepperStepLabelVariants","stepperStepMainVariants","stepperStepTriggerVariants","stepperStepVariants","stepperTitleVariants","stepperVariants","useStepperLabelFit","useStepperRingColors","jsx","_jsx","jsxs","_jsxs","StepperLabelFitContext","countSteps","children","asChild","source","props","filter","child","length","HIDDEN_FROM_AT","accessibilityElementsHidden","importantForAccessibility","StepperRootComponent","className","style","orientation","labelPlacement","ref","layout","fit","measureRef","rootRef","undefined","Provider","value","slot","displayName","isSlot","type","StepperStepComponent","count","labelFit","isLast","stepClass","slotAttributes","childArray","toArray","indicator","find","StepperIndicatorComponent","title","StepperTitleComponent","description","StepperDescriptionComponent","separator","StepperSeparatorComponent","body","hasLabel","index","isCurrent","isComplete","hasProgress","progress","ringColors","currentAttribute","current","indicatorClass","indicatorAttributes","complete","hasCustomGlyph","size","strokeWidth","trackColor","track","indicatorColor","as","filled","String","isCentered","Comp","StepperContentComponent","Stepper","Object","assign","Step","Indicator","Title","Description","Content","Separator"],"sourceRoot":"../../../../src","sources":["components/Stepper/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Stepper/styles.js

@@ -0,0 +1,206 @@
+"use strict";
+
+import { Platform } from 'react-native';
+import { cva } from '@cdx-ui/utils';
+import { TRANSITION_COLORS } from '../../styles/constants';
+
+/** Indicator frame in px. The ring is drawn at this size around the 24px disc. */
+export const STEPPER_INDICATOR_SIZE = 34;
+export const STEPPER_RING_STROKE_WIDTH = 3;
+export function getStepperLayout(orientation, labelPlacement) {
+  if (orientation === 'vertical') {
+    return 'vertical';
+  }
+  return labelPlacement === 'bottom' ? 'horizontal-bottom' : 'horizontal-end';
+}
+
+// Horizontal layouts:
+// - `horizontal-end` (label after the indicator): steps start at their content width and every
+//   step but the last grows; that growth goes to its in-flow separator. With `labelFit: 'words'`
+//   (web, while the row fits) steps keep their min-content width so labels wrap between words;
+//   with `'shrink'` RN Web's `min-width: 0` lets them shrink further so the row never overflows.
+// - `horizontal-bottom` (label centered below): equal columns; the separator is absolute, so it
+//   never affects column layout.
+export const stepperVariants = cva([], {
+  variants: {
+    layout: {
+      vertical: 'flex-col',
+      'horizontal-end': 'w-full flex-row items-start',
+      'horizontal-bottom': 'w-full flex-row items-start'
+    }
+  },
+  defaultVariants: {
+    layout: 'vertical'
+  }
+});
+export const stepperStepVariants = cva([], {
+  variants: {
+    layout: {
+      vertical: 'flex-row',
+      'horizontal-end': 'min-w-0 flex-row items-start',
+      'horizontal-bottom': 'relative min-w-0 flex-1 basis-0 items-center'
+    },
+    isLast: {
+      true: '',
+      false: ''
+    },
+    labelFit: {
+      words: '',
+      shrink: ''
+    }
+  },
+  compoundVariants: [{
+    layout: 'horizontal-end',
+    isLast: false,
+    className: 'grow shrink basis-auto pe-2'
+  }, {
+    layout: 'horizontal-end',
+    isLast: true,
+    className: 'shrink'
+  }, {
+    layout: 'horizontal-end',
+    labelFit: 'words',
+    className: 'min-w-auto'
+  }],
+  defaultVariants: {
+    layout: 'vertical',
+    isLast: false,
+    labelFit: 'shrink'
+  }
+});
+
+// Unexported layout wrappers inside `Stepper.Step` (no `data-slot`).
+export const stepperStepMainVariants = cva(['min-w-0'], {
+  variants: {
+    layout: {
+      vertical: 'flex-1',
+      'horizontal-end': 'shrink',
+      'horizontal-bottom': 'items-center self-stretch px-2'
+    },
+    labelFit: {
+      words: '',
+      shrink: ''
+    }
+  },
+  compoundVariants: [{
+    layout: 'horizontal-end',
+    labelFit: 'words',
+    className: 'min-w-auto'
+  }],
+  defaultVariants: {
+    layout: 'vertical',
+    labelFit: 'shrink'
+  }
+});
+
+// Each layout pads the hover and press fill and cancels it with an equal negative margin, so a
+// step keeps its geometry when it becomes clickable. The 24px disc sits 5px inside its 34px
+// frame, so sides bounded by the disc get 4px and sides bounded by text get 9px; the fill then
+// looks evenly padded. Each layout aligns the trigger to its content (`self-start`, or
+// `self-center` under a centered label) so the fill hugs the indicator and label instead of
+// spanning the step. Hover, press and focus-visible use the `Tabs` hover tokens and the Forge
+// focus ring until the designer specifies clickable-step states.
+export const stepperStepTriggerVariants = cva(['rounded-md', TRANSITION_COLORS, Platform.select({
+  default: 'data-[active=true]:bg-surface-secondary-active',
+  web: ['outline-none data-[clickable=true]:cursor-pointer', 'data-[hover=true]:bg-surface-secondary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active', 'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2'].join(' ')
+})], {
+  variants: {
+    layout: {
+      vertical: 'flex-row items-start self-start gap-2 -my-1 -ms-1 -me-[9px] py-1 ps-1 pe-[9px]',
+      'horizontal-end': 'flex-row items-start self-start gap-2 -my-1 -ms-1 -me-[9px] py-1 ps-1 pe-[9px]',
+      'horizontal-bottom': 'min-w-0 items-center self-center gap-1 -mx-[9px] -mt-1 -mb-[9px] px-[9px] pt-1 pb-[9px]'
+    }
+  },
+  defaultVariants: {
+    layout: 'vertical'
+  }
+});
+export const stepperStepLabelVariants = cva(['min-w-0'], {
+  variants: {
+    layout: {
+      vertical: 'shrink py-[7px]',
+      'horizontal-end': 'shrink py-[7px]',
+      'horizontal-bottom': 'self-stretch'
+    },
+    labelFit: {
+      words: '',
+      shrink: ''
+    }
+  },
+  compoundVariants: [{
+    layout: 'horizontal-end',
+    labelFit: 'words',
+    className: 'min-w-auto'
+  }],
+  defaultVariants: {
+    layout: 'vertical',
+    labelFit: 'shrink'
+  }
+});
+export const stepperStepBodyVariants = cva([], {
+  variants: {
+    layout: {
+      vertical: 'ps-[42px]',
+      'horizontal-end': 'ps-[42px]',
+      'horizontal-bottom': 'self-stretch'
+    }
+  },
+  defaultVariants: {
+    layout: 'vertical'
+  }
+});
+
+// Indicator, disc, numeral and check each emit their own `data-current` because native
+// Uniwind cannot style a child from its parent's data attributes.
+export const stepperIndicatorVariants = cva(['relative size-[34px] shrink-0 items-center justify-center']);
+export const stepperIndicatorRingVariants = cva(['pointer-events-none absolute inset-0']);
+export const stepperIndicatorDiscVariants = cva(['size-6 items-center justify-center rounded-full', 'bg-surface-neutral-strong data-[current=true]:bg-surface-brand-strong']);
+export const stepperIndicatorNumeralVariants = cva(['body-sm font-medium', 'text-content-neutral-on-strong data-[current=true]:text-content-brand-on-strong']);
+export const stepperIndicatorCheckVariants = cva(['size-7 text-content-neutral data-[current=true]:text-content-brand']);
+
+// Native text alignment does not inherit from a parent `View`, so centered labels set it on
+// each text part.
+export const stepperTitleVariants = cva(['body-md text-content-secondary', 'data-[current=true]:font-medium data-[current=true]:text-content-primary'], {
+  variants: {
+    isCentered: {
+      true: 'text-center',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    isCentered: false
+  }
+});
+export const stepperDescriptionVariants = cva(['body-sm text-content-secondary'], {
+  variants: {
+    isCentered: {
+      true: 'text-center',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    isCentered: false
+  }
+});
+export const stepperContentVariants = cva(['gap-2 py-2']);
+
+// Vertical: rendered before the step's main column with zero net width, centered under the
+// 34px frame; `self-stretch` follows the title and content.
+// `horizontal-end`: in flow after the label, centered on the frame's height; it takes the
+// step's growth, and the step's `pe-2` leaves 8px before the next indicator.
+// `horizontal-bottom`: absolute from this column's center to the next one's (columns are equal
+// and have no gap), inset 25px at each end: half the 34px frame plus 8px.
+// `z-10` keeps the line above a clickable trigger's hover and press fill.
+export const stepperSeparatorVariants = cva(['z-10 bg-stroke-secondary'], {
+  variants: {
+    layout: {
+      vertical: 'relative mt-[34px] min-h-6 w-px self-stretch ms-[16.5px] -me-[17.5px]',
+      'horizontal-end': 'relative mt-[16.5px] h-px min-w-6 flex-1 ms-2',
+      'horizontal-bottom': 'absolute top-[16.5px] start-[50%] end-[-50%] h-px ms-[25px] me-[25px]'
+    }
+  },
+  defaultVariants: {
+    layout: 'vertical'
+  }
+});
+//# sourceMappingURL=styles.js.map

package/lib/module/components/Stepper/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Platform","cva","TRANSITION_COLORS","STEPPER_INDICATOR_SIZE","STEPPER_RING_STROKE_WIDTH","getStepperLayout","orientation","labelPlacement","stepperVariants","variants","layout","vertical","defaultVariants","stepperStepVariants","isLast","true","false","labelFit","words","shrink","compoundVariants","className","stepperStepMainVariants","stepperStepTriggerVariants","select","default","web","join","stepperStepLabelVariants","stepperStepBodyVariants","stepperIndicatorVariants","stepperIndicatorRingVariants","stepperIndicatorDiscVariants","stepperIndicatorNumeralVariants","stepperIndicatorCheckVariants","stepperTitleVariants","isCentered","stepperDescriptionVariants","stepperContentVariants","stepperSeparatorVariants"],"sourceRoot":"../../../../src","sources":["components/Stepper/styles.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Stepper/useStepperLabelFit.js

@@ -0,0 +1,18 @@
+"use strict";
+
+/**
+ * How `horizontal-end` labels give way when the row runs out of room. `'words'` keeps each
+ * step at least as wide as its longest word, so labels wrap only between words; `'shrink'` lets
+ * steps shrink below that so the row never overflows.
+ */
+
+const NATIVE_RESULT = {
+  fit: 'shrink',
+  measureRef: undefined
+};
+
+/** Native layout has no min-content sizing, so steps always shrink to fit. */
+export function useStepperLabelFit(_enabled, _count) {
+  return NATIVE_RESULT;
+}
+//# sourceMappingURL=useStepperLabelFit.js.map

package/lib/module/components/Stepper/useStepperLabelFit.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["NATIVE_RESULT","fit","measureRef","undefined","useStepperLabelFit","_enabled","_count"],"sourceRoot":"../../../../src","sources":["components/Stepper/useStepperLabelFit.ts"],"mappings":";;AAGA;AACA;AACA;AACA;AACA;;AAQA,MAAMA,aAAoC,GAAG;EAAEC,GAAG,EAAE,QAAQ;EAAEC,UAAU,EAAEC;AAAU,CAAC;;AAErF;AACA,OAAO,SAASC,kBAAkBA,CAACC,QAAiB,EAAEC,MAAc,EAAyB;EAC3F,OAAON,aAAa;AACtB","ignoreList":[]}

package/lib/module/components/Stepper/useStepperLabelFit.web.js

@@ -0,0 +1,48 @@
+"use strict";
+
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+/**
+ * CSS flex cannot keep min-content minimums only while they fit: `min-width: auto` overflows a
+ * tight row and `min-width: 0` breaks words even when there is room. So labels start at
+ * `'words'`, and if the root then overflows they switch to `'shrink'` before paint. The decision
+ * is kept until the root's width or the step count changes.
+ */
+export function useStepperLabelFit(enabled, count) {
+  const [node, setNode] = useState(null);
+  const [width, setWidth] = useState(0);
+  const [decision, setDecision] = useState(null);
+  const key = `${String(width)}:${String(count)}`;
+  const fit = decision?.key === key ? decision.fit : 'words';
+  useEffect(() => {
+    if (!enabled || node === null || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(() => {
+      setWidth(node.clientWidth);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [enabled, node]);
+
+  // No deps: label text can change without resizing the root, and the measurement is cheap.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useLayoutEffect(() => {
+    if (!enabled || node === null || fit !== 'words') {
+      return;
+    }
+    if (node.scrollWidth > node.clientWidth + 1) {
+      setDecision({
+        key,
+        fit: 'shrink'
+      });
+    }
+  });
+  const measureRef = useCallback(value => {
+    setNode(value);
+  }, []);
+  return {
+    fit: enabled ? fit : 'shrink',
+    measureRef: enabled ? measureRef : undefined
+  };
+}
+//# sourceMappingURL=useStepperLabelFit.web.js.map

package/lib/module/components/Stepper/useStepperLabelFit.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useLayoutEffect","useState","useStepperLabelFit","enabled","count","node","setNode","width","setWidth","decision","setDecision","key","String","fit","ResizeObserver","undefined","observer","clientWidth","observe","disconnect","scrollWidth","measureRef","value"],"sourceRoot":"../../../../src","sources":["components/Stepper/useStepperLabelFit.web.ts"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,eAAe,EAAEC,QAAQ,QAA0B,OAAO;AAW3F;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAACC,OAAgB,EAAEC,KAAa,EAAyB;EACzF,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGL,QAAQ,CAAqB,IAAI,CAAC;EAC1D,MAAM,CAACM,KAAK,EAAEC,QAAQ,CAAC,GAAGP,QAAQ,CAAC,CAAC,CAAC;EACrC,MAAM,CAACQ,QAAQ,EAAEC,WAAW,CAAC,GAAGT,QAAQ,CAAqB,IAAI,CAAC;EAElE,MAAMU,GAAG,GAAG,GAAGC,MAAM,CAACL,KAAK,CAAC,IAAIK,MAAM,CAACR,KAAK,CAAC,EAAE;EAC/C,MAAMS,GAAoB,GAAGJ,QAAQ,EAAEE,GAAG,KAAKA,GAAG,GAAGF,QAAQ,CAACI,GAAG,GAAG,OAAO;EAE3Ed,SAAS,CAAC,MAAM;IACd,IAAI,CAACI,OAAO,IAAIE,IAAI,KAAK,IAAI,IAAI,OAAOS,cAAc,KAAK,WAAW,EAAE;MACtE,OAAOC,SAAS;IAClB;IACA,MAAMC,QAAQ,GAAG,IAAIF,cAAc,CAAC,MAAM;MACxCN,QAAQ,CAACH,IAAI,CAACY,WAAW,CAAC;IAC5B,CAAC,CAAC;IACFD,QAAQ,CAACE,OAAO,CAACb,IAAI,CAAC;IACtB,OAAO,MAAMW,QAAQ,CAACG,UAAU,CAAC,CAAC;EACpC,CAAC,EAAE,CAAChB,OAAO,EAAEE,IAAI,CAAC,CAAC;;EAEnB;EACA;EACAL,eAAe,CAAC,MAAM;IACpB,IAAI,CAACG,OAAO,IAAIE,IAAI,KAAK,IAAI,IAAIQ,GAAG,KAAK,OAAO,EAAE;MAChD;IACF;IACA,IAAIR,IAAI,CAACe,WAAW,GAAGf,IAAI,CAACY,WAAW,GAAG,CAAC,EAAE;MAC3CP,WAAW,CAAC;QAAEC,GAAG;QAAEE,GAAG,EAAE;MAAS,CAAC,CAAC;IACrC;EACF,CAAC,CAAC;EAEF,MAAMQ,UAAU,GAAGvB,WAAW,CAAqBwB,KAAK,IAAK;IAC3DhB,OAAO,CAACgB,KAAsC,CAAC;EACjD,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IAAET,GAAG,EAAEV,OAAO,GAAGU,GAAG,GAAG,QAAQ;IAAEQ,UAAU,EAAElB,OAAO,GAAGkB,UAAU,GAAGN;EAAU,CAAC;AACxF","ignoreList":[]}