@codeleap/web 6.3.0 → 6.8.0

package/src/components/NumberIncrement/index.tsx

@@ -1,29 +1,33 @@
 import React from 'react'
 import { TypeGuards } from '@codeleap/types'
-import { InputBase, selectInputBaseProps } from '../InputBase'
 import { Text } from '../Text'
 import { PatternFormat, NumericFormat, NumberFormatBase } from 'react-number-format'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { NumberIncrementProps } from './types'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { AppIcon } from '@codeleap/styles'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles'
 import { useNumberIncrement } from './useNumberIncrement'
+import { Field } from '../Field'
+import { FieldStateContext } from '../Field/styles'
+import { toDataAttrs } from '../../lib'
+import { View } from '../View'
+import { Touchable } from '../Touchable'
+import { Icon } from '../Icon'
 
 export * from './types'
 export * from './styles'
 
+/**
+ * Numeric stepper field with `Icon`-driven increment/decrement buttons, optional direct keyboard entry, and `Field` layout (label, helper, left/right sections).
+ * Arrow-left/right keyboard events increment or decrement the value while the field is focused; clicking outside closes focus.
+ * Uses: `Field.Provider`, `Field.Wrapper`, `Field.Box`, `Field.Heading`, `Field.Helper`, `Field.SectionSlot`, `Icon`, `useNumberIncrement`
+ */
 export const NumberIncrement = (props: NumberIncrementProps) => {
   const allProps = {
     ...NumberIncrement.defaultProps,
-    ...props
+    ...props,
   }
 
-  const {
-    inputBaseProps,
-    others,
-  } = selectInputBaseProps(allProps)
-
   const {
     style,
     disabled,
@@ -36,9 +40,9 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
     prefix,
     formatter,
     placeholder,
-  } = others
-
-  const styles = useStylesFor(NumberIncrement.styleRegistryName, style)
+    label,
+    helper,
+  } = allProps
 
   const {
     isFocused,
@@ -58,100 +62,95 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
     inputValue,
   } = useNumberIncrement(allProps)
 
-  const partialStyles = useInputBasePartialStyles(styles, ['input', 'placeholder'], {
-    disabled,
-    error: hasError,
-    focus: isFocused,
-    typed: hasValue,
-  })
+  const fieldContext: FieldStateContext = {
+    disabled: !!disabled,
+    hasValue: !!hasValue,
+    error: !!hasError,
+    focused: !!isFocused,
+  }
+
+  const styles = useStylesFor(NumberIncrement.styleRegistryName, style, fieldContext)
+
+  const stateAttrs = toDataAttrs({ disabled: !!disabled, error: !!hasError, focused: !!isFocused })
 
   const InputFormat = TypeGuards.isString(format) || TypeGuards.isString(mask)
     ? PatternFormat
     : NumericFormat
 
-  const Input: any = TypeGuards.isFunction(formatter)
+    const shouldUseBaseInput = TypeGuards.isFunction(formatter)
+  const Input: any = shouldUseBaseInput 
     ? NumberFormatBase
     : InputFormat
 
+  const thousandProps = !shouldUseBaseInput ? {
+    thousandSeparator: separator,
+    thousandsGroupStyle: hasSeparator || TypeGuards.isString(separator) ? 'thousand' : 'none',
+  } : {}
+
   return (
-    <InputBase
-      {...inputBaseProps}
-      ref={wrapperRef}
-      error={hasError ? errorMessage : null}
-      style={{
-        ...styles,
-        innerWrapper: {
-          ...styles.innerWrapper,
-          ...(editable ? styles['innerWrapper:cursor'] : {}),
-        },
-      }}
-      rightIcon={{
-        name: 'plus' as AppIcon,
-        disabled: disabled || incrementDisabled,
-        onPress: () => handleChange('increment'),
-        component: 'button',
-        ...inputBaseProps.rightIcon,
-      }}
-      leftIcon={{
-        name: 'minus' as AppIcon,
-        disabled: disabled || decrementDisabled,
-        onPress: () => handleChange('decrement'),
-        component: 'button',
-        ...inputBaseProps.leftIcon,
-      }}
-      disabled={disabled}
-      focused={isFocused}
-      innerWrapperProps={{
-        ...(inputBaseProps.innerWrapperProps || {}),
-        onClick: onPressInnerWrapper,
-      }}
-      innerWrapperRef={innerWrapperRef}
+    <Field.Provider
+      context={fieldContext}
+      label={label}
+      helper={hasError ? errorMessage : helper}
+      componentName='number_increment'
+      leftSection={
+         <Icon icon={'minus' as AppIcon} onPress={() => handleChange('decrement')}
+            disabled={disabled || decrementDisabled}
+            style={styles.leftSection}/>
+      }
+      rightSection={
+          <Icon icon={'plus' as AppIcon} onPress={() => handleChange('increment')}
+            disabled={disabled || incrementDisabled}
+            style={styles.rightSection}/>
+      }
     >
-      {editable && !disabled ? (
-        <Input
-          displayType='input'
-          css={[
-            partialStyles?.input,
-            {
-              '&::placeholder': partialStyles?.placeholder,
-            },
-            {
-              '&:focus': [
+      <Field.Wrapper ref={wrapperRef} style={styles.wrapper}>
+        <Field.Heading style={styles.heading} />
+        <Field.Box
+          ref={innerWrapperRef}
+          style={[styles.box, editable ? styles['box:cursor'] : undefined] as any}
+          onClick={onPressInnerWrapper}
+          {...stateAttrs}
+        >
+          <Field.SectionSlot position='left' />
+         
+            <Input
+              displayType='input'
+              css={[
+                styles.input,
                 {
-                  outline: 'none',
-                  borderWidth: 0,
-                  borderColor: 'transparent',
+                  '&:focus': { outline: 'none', borderWidth: 0, borderColor: 'transparent' },
                 },
-              ],
-            },
-          ]}
-          inputMode='numeric'
-          onValueChange={handleChangeInput}
-          onBlur={handleBlur}
-          onFocus={handleFocus}
-          value={inputValue}
-          thousandSeparator={separator}
-          thousandsGroupStyle={hasSeparator || TypeGuards.isString(separator) ? 'thousand' : 'none'}
-          suffix={suffix}
-          prefix={prefix}
-          format={TypeGuards.isFunction(formatter) ? formatter as any : format}
-          mask={mask}
-          placeholder={placeholder}
-          getInputRef={innerInputRef}
-        />
-      ) : <Text text={String(inputValue)} style={partialStyles?.input} />}
-    </InputBase>
+              ]}
+              inputMode='numeric'
+              onValueChange={handleChangeInput}
+              onBlur={handleBlur}
+              onFocus={handleFocus}
+              value={inputValue}
+              {...thousandProps}
+              suffix={suffix}
+              prefix={prefix}
+              format={TypeGuards.isFunction(formatter) ? formatter as any : format}
+              mask={mask}
+              placeholder={placeholder}
+              getInputRef={innerInputRef}
+              disabled={disabled}
+            />
+       
+          
+          <Field.SectionSlot position='right' />
+          
+        </Field.Box>
+        <Field.Helper style={styles.helper} />
+      </Field.Wrapper>
+    </Field.Provider>
   )
 }
 
 NumberIncrement.styleRegistryName = 'NumberIncrement'
-NumberIncrement.elements = [...InputBase.elements, 'input', 'placeholder']
+NumberIncrement.elements = [...Field.elements, 'input', 'placeholder']
 NumberIncrement.rootElement = 'wrapper'
 
-NumberIncrement.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return NumberIncrement as (props: StyledComponentProps<NumberIncrementProps, typeof styles>) => IJSX
-}
-
 NumberIncrement.defaultProps = {
   max: 1000000000,
   min: 0,

package/src/components/NumberIncrement/styles.ts

@@ -1,10 +1,5 @@
-import { InputBaseParts } from '../InputBase'
+import { FieldParts } from '../Field'
 
-export type NumberIncrementParts = InputBaseParts | 'input' | 'placeholder'
+export type NumberIncrementParts = FieldParts | 'input' | 'placeholder'
 
-export type NumberIncrementStates = 'disabled' | 'focus' | 'error'
-
-export type NumberIncrementComposition =
-  | NumberIncrementParts
-  | `${NumberIncrementParts}:${NumberIncrementStates}`
-  | `innerWrapper:cursor`
+export type NumberIncrementComposition = NumberIncrementParts

package/src/components/NumberIncrement/types.ts

@@ -1,14 +1,26 @@
 import { NumberIncrementComposition } from './styles'
-import { InputBaseProps } from '../InputBase'
 import { PatternFormatProps as PFProps, NumericFormatProps as NFProps } from 'react-number-format'
 import { FormatInputValueFunction } from 'react-number-format/types/types'
-import { StyledProp } from '@codeleap/styles'
+import { ICSS, StyleProp } from '@codeleap/styles'
 import { NumberField } from '@codeleap/form'
+import { FieldProps } from '../Field'
 
+export interface NumberIncrementStyleDef {
+  __internal: Record<NumberIncrementComposition, ICSS>
+}
+
+/**
+ * Props for `NumberIncrement`.
+ * `min`/`max` clamp the value on blur and disable the respective increment/decrement button at the boundary (defaults: `min=0`, `max=1000000000`, `step=1`).
+ * `editable` controls whether the user can type directly into the input; `false` makes it a stepper-only control.
+ * `formatter` is a `react-number-format` `FormatInputValueFunction`; providing it switches the underlying input to `NumberFormatBase`, which disables `separator`/`thousandSeparator` props.
+ */
 export type NumberIncrementProps =
-  Pick<InputBaseProps, 'debugName' | 'disabled' | 'label'> &
+  Pick<FieldProps, 'label' | 'helper'> &
   {
-    style?: StyledProp<NumberIncrementComposition>
+    debugName?: string
+    disabled?: boolean
+    style?: StyleProp<NumberIncrementComposition, keyof NumberIncrementStyleDef>
     max?: number
     min?: number
     step?: number

package/src/components/NumberIncrement/useNumberIncrement.ts

@@ -1,10 +1,15 @@
 import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react'
 import { NumberIncrementProps } from './types'
-import { useInputBase } from '../InputBase/useInputBase'
+import { useFieldInput } from '../Field'
 import { Field, fields } from '@codeleap/form'
 import { TypeGuards } from '@codeleap/types'
 import { NumericFormatProps as NFProps } from 'react-number-format'
 
+/**
+ * Manages value, focus, increment/decrement button disabled state, and keyboard arrow-key handling for `NumberIncrement`.
+ * Clamps the value to `[min, max]` on blur; registers global `keydown` and `mousedown` listeners to track focus outside of React's event system.
+ * No provider required; designed to be called only inside `NumberIncrement`.
+ */
 export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
   const {
     value,
@@ -25,7 +30,7 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
     wrapperRef,
     inputValue,
     onInputValueChange,
-  } = useInputBase(
+  } = useFieldInput(
     field as Field<number, any, any>,
     fields.number as () => Field<number, any, any>,
     { value, onValueChange }

package/src/components/Overlay/index.tsx

@@ -10,6 +10,12 @@ import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 export * from './styles'
 export * from './types'
 
+/**
+ * Visually hidden overlay that transitions to visible state and registers a
+ * browser pop-state entry so the back button can dismiss it.
+ * Renders as `Touchable` when `onPress` or `onClick` is provided, otherwise as `View`.
+ * Uses: `Touchable`, `View`, `useStylesFor`, `WebStyleRegistry`
+ */
 export const Overlay = (overlayProps: OverlayProps) => {
   const {
     visible,
@@ -25,11 +31,22 @@ export const Overlay = (overlayProps: OverlayProps) => {
   usePopState(visible, props?.onPress)
 
   const isPressable = !!props?.onClick || !!props?.onPress
-  const Component = isPressable ? Touchable : View
+
+  if (isPressable) {
+    return (
+      <Touchable
+        {...props}
+        style={[
+          { transition: 'opacity 0.2s ease' },
+          styles.wrapper,
+          visible ? styles['wrapper:visible'] : null,
+        ]}
+      />
+    )
+  }
 
   return (
-    // @ts-expect-error
-    <Component
+    <View
       {...props}
       style={[
         { transition: 'opacity 0.2s ease' },

package/src/components/Overlay/types.ts

@@ -1,13 +1,18 @@
-import { StyledProp } from '@codeleap/styles'
+import { StyleProp } from '@codeleap/styles'
 import { ViewProps } from '../View'
 import { OverlayComposition } from './styles'
 import { AnyFunction } from '@codeleap/types'
 
+export interface OverlayStyleDef {}
+
+/** Props for the `Overlay` component. */
 export type OverlayProps =
   Omit<ViewProps, 'style'> &
   {
     debugName: string
+    /** Controls `wrapper:visible` style variant and back-navigation pop-state registration. */
     visible?: boolean
-    style?: StyledProp<OverlayComposition>
+    style?: StyleProp<OverlayComposition, keyof OverlayStyleDef>
+    /** When provided the overlay renders as `Touchable`; also used as the pop-state handler. */
     onPress?: AnyFunction
   }

package/src/components/PaginationButtons/index.tsx

@@ -8,6 +8,11 @@ import { AnyRecord, AppIcon, IJSX, StyledComponentProps, useCompositionStyles, u
 export * from './styles'
 export * from './types'
 
+/**
+ * Numbered page-navigation control with optional previous/next arrow buttons and responsive abbreviation of middle pages.
+ * Abbreviation behaviour and mobile layout are auto-detected from the `tabletSmall` theme breakpoint but can be overridden via props.
+ * Uses: `Button`
+ */
 export const PaginationButtons = (props: PaginationButtonsProps) => {
   const allProps = {
     ...PaginationButtons.defaultProps,

package/src/components/PaginationButtons/types.ts

@@ -2,8 +2,17 @@ import { AnyFunction } from '@codeleap/types'
 import { PaginationButtonsComposition } from './styles'
 import { ButtonProps } from '../Button'
 import { PaginationParams } from '../../lib'
-import { AppIcon, StyledProp } from '@codeleap/styles'
+import { AppIcon, StyleProp } from '@codeleap/styles'
 
+export interface PaginationButtonsStyleDef {}
+
+/**
+ * @field shouldAbbreviate - Collapses middle page numbers into `abbreviationSymbol` when `true` (default).
+ * @field abbreviationSymbol - Token rendered in place of hidden pages; defaults to `"..."`.
+ * @field isMobile - Forces mobile layout (fewer visible pages) when `true`; auto-detected via `tabletSmall` media query when `null`.
+ * @field displayLeftArrow / displayRightArrow - Toggle the previous/next arrow buttons independently.
+ * @field onFetchPreviousPage / onFetchNextPage - Side-effect callbacks fired alongside the internal page change; useful for server-side pagination.
+ */
 export type PaginationButtonsProps =
   PaginationParams &
   {
@@ -22,5 +31,5 @@ export type PaginationButtonsProps =
     controlRightIconName?: AppIcon
     leftArrowButtonProps?: Partial<ButtonProps>
     rightArrowButtonProps?: Partial<ButtonProps>
-    style?: StyledProp<PaginationButtonsComposition>
+    style?: StyleProp<PaginationButtonsComposition, keyof PaginationButtonsStyleDef>
   }

package/src/components/PaginationIndicator/index.tsx

@@ -11,6 +11,10 @@ import { AnyRecord, IJSX, StyledComponentProps, useNestedStylesByKey } from '@co
 export * from './styles'
 export * from './types'
 
+/**
+ * Status indicator placed at the bottom of a paginated or infinite-scroll list — shows a spinner while fetching, a "no more items" message when exhausted, or nothing otherwise.
+ * Uses: `ActivityIndicator`, `Text`
+ */
 export const PaginationIndicator = (props: PaginationIndicatorProps) => {
   const {
     hasMore,

package/src/components/PaginationIndicator/types.ts

@@ -3,16 +3,24 @@ import { ActivityIndicatorProps } from '../ActivityIndicator'
 import { TextProps } from '../Text'
 import { ComponentCommonProps } from '../../types'
 import { PaginationIndicatorComposition } from './styles'
-import { StyledProp } from '@codeleap/styles'
+import { StyleProp } from '@codeleap/styles'
 
+export interface PaginationIndicatorStyleDef {}
+
+/**
+ * @field isFetching - When `true`, hides all other content and shows the `ActivityIndicator` (or `activityIndicator` slot).
+ * @field hasMore - When `false` and `isFetching` is also `false`, renders `noMoreItemsText`.
+ * @field activityIndicator - Custom element that replaces the default `ActivityIndicator` while loading.
+ * @field noMoreItemsText - Shown when the list has been fully loaded; accepts a string, number, or a React element.
+ */
 export type PaginationIndicatorProps =
-  ComponentCommonProps & 
+  ComponentCommonProps &
   {
     isFetching?: boolean
     noMoreItemsText: React.ReactElement | string | number
     hasMore?: boolean
     activityIndicator?: React.ReactElement
-    style?: StyledProp<PaginationIndicatorComposition>
+    style?: StyleProp<PaginationIndicatorComposition, keyof PaginationIndicatorStyleDef>
     indicatorProps?: Partial<ActivityIndicatorProps>
     textProps?: Partial<TextProps<'p'>>
   }

package/src/components/Progress/Bar/Segmented.tsx

@@ -0,0 +1,66 @@
+import { motion } from 'motion/react'
+import { View } from '../../components'
+import { ProgressBarSegmentedProps } from './types'
+import { WebStyleRegistry } from '../../../lib/WebStyleRegistry'
+import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
+import { useStylesFor } from '../../../lib/hooks/useStylesFor'
+
+/**
+ * Horizontal progress bar made up of N discrete pill segments.
+ * Active segments (index < `progress`) receive `styles.segmentActive` merged on top of `styles.segment`.
+ * When `animated` is true each active segment fades in with a staggered delay.
+ */
+export const ProgressBarSegmented = (props: ProgressBarSegmentedProps) => {
+  const {
+    progress,
+    segments,
+    style,
+    debugName,
+    animated,
+    animatedProps,
+    staggerDelay,
+    ...rest
+  } = {
+    ...ProgressBarSegmented.defaultProps,
+    ...props,
+  }
+
+  const styles = useStylesFor(ProgressBarSegmented.styleRegistryName, style)
+
+  const SegmentComponent: any = animated ? motion.div : 'div'
+
+  return (
+    <View debugName={debugName} {...rest} style={styles.wrapper}>
+      {Array.from({ length: segments }, (_, i) => {
+        const isActive = i < progress
+        return (
+          <SegmentComponent
+            key={i}
+            css={mergeStyles([styles.segment, isActive ? styles.segmentActive : null])}
+            animate={animated ? { opacity: isActive ? 1 : 0.4 } : undefined}
+            initial={animated ? { opacity: 0.4 } : undefined}
+            transition={animated ? { delay: isActive ? i * staggerDelay : 0, duration: 0.2 } : undefined}
+            {...(animated ? animatedProps : {})}
+          />
+        )
+      })}
+    </View>
+  )
+}
+
+ProgressBarSegmented.styleRegistryName = 'ProgressBarSegmented'
+ProgressBarSegmented.elements = ['wrapper', 'segment', 'segmentActive']
+ProgressBarSegmented.rootElement = 'wrapper'
+
+ProgressBarSegmented.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return ProgressBarSegmented as (props: StyledComponentProps<ProgressBarSegmentedProps, typeof styles>) => IJSX
+}
+
+ProgressBarSegmented.defaultProps = {
+  progress: 0,
+  segments: 5,
+  animated: true,
+  staggerDelay: 0.05,
+} as Partial<ProgressBarSegmentedProps>
+
+WebStyleRegistry.registerComponent(ProgressBarSegmented)

package/src/components/Progress/Bar/index.tsx

@@ -1,24 +1,30 @@
 import { TypeGuards } from '@codeleap/types'
-import { Root, Indicator } from '@radix-ui/react-progress'
+import { motion } from 'motion/react'
 import { Icon, Text, View } from '../../components'
 import { ProgressBarProps } from './types'
 import { formatProgress as _formatProgress } from '../utils'
 import { WebStyleRegistry } from '../../../lib/WebStyleRegistry'
 import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
 import { useStylesFor } from '../../../lib/hooks/useStylesFor'
+import { ProgressBarSegmented } from './Segmented'
 
 export * from './types'
 export * from './styles'
 
+/**
+ * Horizontal progress bar with optional left/right icons and labels.
+ * The indicator fills via a `scaleX` transform animated with Framer Motion when `animated` is true.
+ * Uses: `Icon`, `Text`
+ */
 export const ProgressBar = (props: ProgressBarProps) => {
   const {
     progress,
     style,
     debugName,
     formatProgress,
-    progressIndicatorProps,
-    progressRootProps,
     showProgress,
+    animated,
+    animatedProps,
     leftIcon,
     leftIconProps,
     rightIcon,
@@ -43,11 +49,13 @@ export const ProgressBar = (props: ProgressBarProps) => {
   const leftTextStyles = mergeStyles([styles.text, styles.leftText])
   const rightTextStyles = mergeStyles([styles.text, styles.rightText])
 
+  const IndicatorComponent: any = animated ? motion.div : 'div'
+
   return (
     <View debugName={debugName} {...rest} style={styles.wrapper}>
       {!TypeGuards.isNil(leftIcon) ? (
         <Icon
-          name={leftIcon}
+          icon={leftIcon}
           debugName={`leftIcon-${debugName}`}
           {...leftIconProps}
           style={leftIconStyles}
@@ -61,17 +69,22 @@ export const ProgressBar = (props: ProgressBarProps) => {
         />
       ) : leftText}
 
-      <Root
-        // @ts-expect-error
-        css={styles.progress}
-        value={progress}
-        {...progressRootProps}
+      <div
+        css={styles.track}
+        role='progressbar'
+        aria-valuenow={progress}
+        aria-valuemin={0}
+        aria-valuemax={100}
       >
-        <Indicator
-          css={{ ...styles.indicator, transform: `translateX(-${100 - progress}%)` }}
-          {...progressIndicatorProps}
+        <IndicatorComponent
+          css={styles.indicator}
+          style={{ transformOrigin: 'left' }}
+          animate={animated ? { scaleX: progress / 100 } : undefined}
+          initial={animated ? { scaleX: 0 } : undefined}
+          transition={animated ? { duration: 0.6, ease: [0.65, 0, 0.35, 1] } : undefined}
+          {...(animated ? animatedProps : {})}
         />
-      </Root>
+      </div>
 
       {TypeGuards.isString(text) || showProgress ? (
         <Text
@@ -83,7 +96,7 @@ export const ProgressBar = (props: ProgressBarProps) => {
 
       {!TypeGuards.isNil(rightIcon) ? (
         <Icon
-          name={rightIcon}
+          icon={rightIcon}
           debugName={`rightIcon-${debugName}`}
           {...rightIconProps}
           style={rightIconStyles}
@@ -101,7 +114,7 @@ export const ProgressBar = (props: ProgressBarProps) => {
 }
 
 ProgressBar.styleRegistryName = 'ProgressBar'
-ProgressBar.elements = ['wrapper', 'progress', 'indicator', 'text', 'icon', 'leftIcon', 'leftText', 'rightIcon', 'rightText']
+ProgressBar.elements = ['wrapper', 'track', 'indicator', 'text', 'icon', 'leftIcon', 'leftText', 'rightIcon', 'rightText']
 ProgressBar.rootElement = 'wrapper'
 
 ProgressBar.withVariantTypes = <S extends AnyRecord>(styles: S) => {
@@ -112,6 +125,9 @@ ProgressBar.defaultProps = {
   progress: 0,
   showProgress: false,
   formatProgress: _formatProgress,
+  animated: true,
 } as Partial<ProgressBarProps>
 
+ProgressBar.Segmented = ProgressBarSegmented
+
 WebStyleRegistry.registerComponent(ProgressBar)

package/src/components/Progress/Bar/styles.ts

@@ -1,6 +1,6 @@
 export type ProgressBarComposition =
   'wrapper' |
-  'progress' |
+  'track' |
   'indicator' |
   'text' |
   'icon' |
@@ -8,3 +8,8 @@ export type ProgressBarComposition =
   'leftText' |
   'rightIcon' |
   'rightText'
+
+export type ProgressBarSegmentedComposition =
+  'wrapper' |
+  'segment' |
+  'segmentActive'