@codeleap/web 6.3.0 → 6.8.0

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

@@ -1,18 +1,27 @@
-import { ProgressBarComposition } from './styles'
-import { ProgressProps, ProgressIndicatorProps } from '@radix-ui/react-progress'
+import { ProgressBarComposition, ProgressBarSegmentedComposition } from './styles'
 import { ProgressPropsRoot } from '..'
-import { AppIcon, StyledProp } from '@codeleap/styles'
+import { AppIcon, StyleProp } from '@codeleap/styles'
 import { TextProps } from '../../Text/types'
 import { IconProps } from '../../Icon/types'
 import { ViewProps } from '../../View'
+import { MotionProps } from 'motion/react'
 
+export interface ProgressBarStyleDef {}
+
+/**
+ * @field showProgress - When `true`, renders a formatted percentage label using `formatProgress`; overrides `text`.
+ * @field formatProgress - Converts `progress` to the displayed string; defaults to `formatProgress` from `Progress/utils`.
+ * @field animated - When `true`, animates the indicator fill using Framer Motion `scaleX`; default `true`.
+ * @field animatedProps - Forwarded to the `motion.div` indicator; only used when `animated` is `true`.
+ */
 export type ProgressBarProps =
   Omit<ViewProps, 'style'> &
-  Omit<ProgressPropsRoot, 'style'> & 
+  Omit<ProgressPropsRoot, 'style'> &
   {
-    style?: StyledProp<ProgressBarComposition>
-    progressIndicatorProps?: ProgressIndicatorProps
-    progressRootProps?: ProgressProps
+    style?: StyleProp<ProgressBarComposition, keyof ProgressBarStyleDef>
+    /** When true, uses motion.div on the indicator; default true */
+    animated?: boolean
+    animatedProps?: Partial<MotionProps>
     leftIcon?: AppIcon
     leftIconProps?: Partial<IconProps>
     rightIcon?: AppIcon
@@ -24,3 +33,26 @@ export type ProgressBarProps =
     rightText?: TextProps['text'] | React.ReactElement
     rightTextProps?: Partial<TextProps>
   }
+
+export interface ProgressBarSegmentedStyleDef {}
+
+/**
+ * @field progress - Number of filled segments (0–`segments`).
+ * @field segments - Total number of pill segments to render.
+ * @field animated - When `true`, active segments fade in with a staggered delay; default `true`.
+ * @field animatedProps - Forwarded to each `motion.div` segment; only used when `animated` is `true`.
+ * @field staggerDelay - Delay in seconds between consecutive segment animations; default `0.05`.
+ */
+export type ProgressBarSegmentedProps =
+  Omit<ViewProps, 'style'> &
+  {
+    progress: number
+    segments: number
+    style?: StyleProp<ProgressBarSegmentedComposition, keyof ProgressBarSegmentedStyleDef>
+    /** When true, uses motion.div per segment; default true */
+    animated?: boolean
+    animatedProps?: Partial<MotionProps>
+    /** Stagger delay between segment animations in seconds; default 0.05 */
+    staggerDelay?: number
+    debugName?: string
+  }

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

@@ -0,0 +1,114 @@
+import { motion } from 'motion/react'
+import { View } from '../../components'
+import { ProgressCircleSegmentedProps } from './types'
+import { WebStyleRegistry } from '../../../lib/WebStyleRegistry'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { useStylesFor } from '../../../lib/hooks/useStylesFor'
+import { useMemo } from '@codeleap/hooks'
+import { TypeGuards } from '@codeleap/types'
+import { CSSProperties } from 'react'
+
+/**
+ * Circular progress indicator made up of N discrete SVG arc segments distributed evenly around the circle.
+ * Active segments (index < `progress`) use `styles.segmentActive` stroke colour.
+ * When `animated` is true each active segment fades in with a staggered delay.
+ */
+export const ProgressCircleSegmented = (props: ProgressCircleSegmentedProps) => {
+  const {
+    progress,
+    segments,
+    size: propSize,
+    gapAngle,
+    style,
+    debugName,
+    animated,
+    animatedProps,
+    staggerDelay,
+    strokeLinecap,
+    ...rest
+  } = {
+    ...ProgressCircleSegmented.defaultProps,
+    ...props,
+  }
+
+  const styles = useStylesFor(ProgressCircleSegmented.styleRegistryName, style)
+
+  const size = useMemo(() => {
+    if (TypeGuards.isNumber(propSize)) return propSize
+    const trackStyle = styles.track as CSSProperties & { size?: number }
+    const raw = trackStyle?.size ?? trackStyle?.width ?? trackStyle?.height ?? 40
+    return typeof raw === 'number' ? raw : 40
+  }, [propSize, styles.track])
+
+  const segmentStyle = styles.segment as CSSProperties & { strokeWidth?: number; borderWidth?: number }
+  const strokeWidth = segmentStyle?.strokeWidth ?? segmentStyle?.borderWidth ?? 8
+  const center = size / 2
+  const radius = center - strokeWidth / 2
+  const circumference = 2 * Math.PI * radius
+
+  const totalGapAngle = segments * gapAngle
+  const perSegmentAngle = (360 - totalGapAngle) / segments
+  const eachArc = circumference * (perSegmentAngle / 360)
+  const gapArc = circumference * (gapAngle / 360)
+
+  const SegmentComponent: any = animated ? motion.circle : 'circle'
+
+  const inactiveColor = (segmentStyle as any)?.borderColor ?? (segmentStyle as any)?.stroke ?? '#dbdbdb'
+  const activeStyle = styles.segmentActive as CSSProperties
+  const activeColor = (activeStyle as any)?.borderColor ?? (activeStyle as any)?.stroke ?? inactiveColor
+
+  return (
+    <View debugName={debugName} {...rest} style={styles.wrapper}>
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        style={{ display: 'block' }}
+      >
+        {Array.from({ length: segments }, (_, i) => {
+          const isActive = i < progress
+          const dashOffset = -(i * (eachArc + gapArc))
+
+          return (
+            <SegmentComponent
+              key={i}
+              cx={center}
+              cy={center}
+              r={radius}
+              fill='none'
+              strokeWidth={strokeWidth}
+              stroke={isActive ? activeColor : inactiveColor}
+              strokeLinecap={strokeLinecap}
+              strokeDasharray={`${eachArc} ${circumference - eachArc}`}
+              strokeDashoffset={dashOffset}
+              transform={`rotate(-90 ${center} ${center})`}
+              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 : {})}
+            />
+          )
+        })}
+      </svg>
+    </View>
+  )
+}
+
+ProgressCircleSegmented.styleRegistryName = 'ProgressCircleSegmented'
+ProgressCircleSegmented.elements = ['wrapper', 'track', 'segment', 'segmentActive']
+ProgressCircleSegmented.rootElement = 'wrapper'
+
+ProgressCircleSegmented.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return ProgressCircleSegmented as (props: StyledComponentProps<ProgressCircleSegmentedProps, typeof styles>) => IJSX
+}
+
+ProgressCircleSegmented.defaultProps = {
+  progress: 0,
+  segments: 5,
+  gapAngle: 4,
+  animated: true,
+  staggerDelay: 0.05,
+  strokeLinecap: 'round',
+} as Partial<ProgressCircleSegmentedProps>
+
+WebStyleRegistry.registerComponent(ProgressCircleSegmented)

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

@@ -1,5 +1,5 @@
-import { CircularProgressbarWithChildren, buildStyles } from 'react-circular-progressbar'
 import { TypeGuards } from '@codeleap/types'
+import { motion } from 'motion/react'
 import { ProgressCircleProps } from './types'
 import { formatProgress as _formatProgress } from '../utils'
 import { useMemo } from '@codeleap/hooks'
@@ -10,10 +10,17 @@ import { Text } from '../../Text'
 import { Icon } from '../../Icon'
 import { View } from '../../View'
 import { CSSProperties } from 'react'
+import { ProgressCircleSegmented } from './Segmented'
 
 export * from './styles'
 export * from './types'
 
+/**
+ * Circular progress indicator rendered as a custom SVG arc, with an optional centred icon, text label, or arbitrary children.
+ * The arc is animated via Framer Motion `pathLength` when `animated` is true.
+ * Track colour comes from `styles.track.backgroundColor`; indicator colour from `styles.indicator.borderColor`.
+ * Uses: `Icon`, `Text`
+ */
 export const ProgressCircle = (props: ProgressCircleProps) => {
   const {
     text,
@@ -22,13 +29,14 @@ export const ProgressCircle = (props: ProgressCircleProps) => {
     iconProps,
     debugName,
     showProgress,
-    circleProps,
     children,
     formatProgress,
-    circleStyles,
     style,
     textProps,
     size: propSize,
+    animated,
+    animatedProps,
+    strokeLinecap,
     ...rest
   } = {
     ...ProgressCircle.defaultProps,
@@ -37,54 +45,92 @@ export const ProgressCircle = (props: ProgressCircleProps) => {
 
   const styles = useStylesFor(ProgressCircle.styleRegistryName, style)
 
-  const wrapperSize = useMemo(() => {
+  const size = useMemo(() => {
     if (TypeGuards.isNumber(propSize)) return propSize
-    // @ts-expect-error icss type
-    const value = styles.circle?.size ?? styles.circle?.width ?? styles.circle?.height
-    return value ?? 0
-  }, [styles.circle])
+    const trackStyle = styles.track as CSSProperties & { size?: number }
+    const raw = trackStyle?.size ?? trackStyle?.width ?? trackStyle?.height ?? 40
+    return typeof raw === 'number' ? raw : 40
+  }, [propSize, styles.track])
 
-  const lineStyle = styles.line as CSSProperties
+  const indicatorStyle = styles.indicator as CSSProperties & { strokeWidth?: number; borderWidth?: number }
+  const trackStyle = styles.track as CSSProperties
+
+  const strokeWidth = indicatorStyle?.strokeWidth ?? indicatorStyle?.borderWidth ?? 8
+  const center = size / 2
+  const radius = center - strokeWidth / 2
+  const trackColor = (trackStyle as any)?.backgroundColor ?? (trackStyle as any)?.borderColor ?? 'transparent'
+  const indicatorColor = (indicatorStyle as any)?.borderColor ?? (indicatorStyle as any)?.color ?? 'currentColor'
+
+  const IndicatorComponent: any = animated ? motion.circle : 'circle'
 
   return (
     <View debugName={debugName} {...rest} style={styles.wrapper}>
-      <CircularProgressbarWithChildren
-        value={progress}
-        styles={buildStyles({
-          pathColor: lineStyle?.borderColor,
-          trailColor: lineStyle?.backgroundColor,
-          strokeLinecap: 'butt',
-          ...circleStyles,
-        })}
-        {...circleProps}
-        // @ts-expect-error
-        css={[styles.circle, { width: wrapperSize, height: wrapperSize }]}
-      >
-        {children}
-
-        {!TypeGuards.isNil(icon) ? (
-          <Icon
-            name={icon}
-            debugName={`innerIcon-${debugName}`}
-            {...iconProps}
-            style={styles.icon}
+      <div style={{ position: 'relative', width: size, height: size }}>
+        <svg
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          style={{ display: 'block' }}
+        >
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill='none'
+            strokeWidth={strokeWidth}
+            stroke={trackColor}
+            transform={`rotate(-90 ${center} ${center})`}
           />
-        ) : null}
-
-        {TypeGuards.isString(text) || showProgress ? (
-          <Text
-            text={showProgress ? formatProgress(progress) : String(text)}
-            {...textProps}
-            style={styles.text}
+          <IndicatorComponent
+            cx={center}
+            cy={center}
+            r={radius}
+            fill='none'
+            strokeWidth={strokeWidth}
+            stroke={indicatorColor}
+            strokeLinecap={strokeLinecap}
+            pathLength={1}
+            animate={animated ? { pathLength: progress / 100 } : undefined}
+            initial={animated ? { pathLength: 0 } : undefined}
+            transition={animated ? { duration: 0.6, ease: 'easeInOut' } : undefined}
+            transform={`rotate(-90 ${center} ${center})`}
+            {...(animated ? animatedProps : {})}
           />
-        ) : text}
-      </CircularProgressbarWithChildren>
+        </svg>
+
+        <div style={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+          {children}
+
+          {!TypeGuards.isNil(icon) ? (
+            <Icon
+              icon={icon}
+              debugName={`innerIcon-${debugName}`}
+              {...iconProps}
+              style={styles.icon}
+            />
+          ) : null}
+
+          {TypeGuards.isString(text) || showProgress ? (
+            <Text
+              text={showProgress ? formatProgress(progress) : String(text)}
+              {...textProps}
+              style={styles.text}
+            />
+          ) : text}
+        </div>
+      </div>
     </View>
   )
 }
 
 ProgressCircle.styleRegistryName = 'ProgressCircle'
-ProgressCircle.elements = ['wrapper', 'line', 'circle', 'text', 'icon', 'text']
+ProgressCircle.elements = ['wrapper', 'track', 'indicator', 'text', 'icon']
 ProgressCircle.rootElement = 'wrapper'
 
 ProgressCircle.withVariantTypes = <S extends AnyRecord>(styles: S) => {
@@ -96,6 +142,10 @@ ProgressCircle.defaultProps = {
   showProgress: false,
   formatProgress: _formatProgress,
   size: null,
+  animated: true,
+  strokeLinecap: 'round',
 } as Partial<ProgressCircleProps>
 
+ProgressCircle.Segmented = ProgressCircleSegmented
+
 WebStyleRegistry.registerComponent(ProgressCircle)

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

@@ -1 +1,7 @@
-export type ProgressCircleComposition = 'wrapper' | 'line' | 'circle' | 'text' | 'icon'
+export type ProgressCircleComposition = 'wrapper' | 'track' | 'indicator' | 'text' | 'icon'
+
+export type ProgressCircleSegmentedComposition =
+  'wrapper' |
+  'track' |
+  'segment' |
+  'segmentActive'

package/src/components/Progress/Circle/types.ts

@@ -1,20 +1,62 @@
-import { PropsOf } from '@codeleap/types'
-import { IconProps, ProgressCircleComposition, ViewProps, TextProps } from '../../components'
+import { ProgressCircleComposition, ProgressCircleSegmentedComposition } from './styles'
 import { ProgressPropsRoot } from '..'
-import { CircularProgressbarWithChildren, buildStyles } from 'react-circular-progressbar'
-import { AppIcon, StyledProp } from '@codeleap/styles'
+import { AppIcon, StyleProp } from '@codeleap/styles'
+import { TextProps } from '../../Text/types'
+import { IconProps } from '../../Icon/types'
+import { ViewProps } from '../../View'
+import { MotionProps } from 'motion/react'
 
+export interface ProgressCircleStyleDef {}
+
+/**
+ * @field size - Explicit pixel size for the SVG; falls back to `styles.track.size / width / height` when omitted.
+ * @field strokeLinecap - SVG stroke line cap for the progress arc; default `'round'`.
+ * @field showProgress - When `true`, renders a formatted percentage label using `formatProgress`; overrides `text`.
+ * @field formatProgress - Converts `progress` to the displayed string; defaults to `formatProgress` from `Progress/utils`.
+ * @field animated - When `true`, animates the arc using Framer Motion `pathLength`; default `true`.
+ * @field animatedProps - Forwarded to the `motion.circle` arc element; only used when `animated` is `true`.
+ */
 export type ProgressCircleProps =
   Omit<ViewProps, 'style'> &
   Omit<ProgressPropsRoot, 'style'> &
   {
-    style?: StyledProp<ProgressCircleComposition>
-    circleProps?: PropsOf<typeof CircularProgressbarWithChildren>
-    circleStyles?: Parameters<typeof buildStyles>[0]
+    style?: StyleProp<ProgressCircleComposition, keyof ProgressCircleStyleDef>
     children?: React.ReactNode
     size?: number
     text?: string | React.ReactElement
     textProps?: Partial<TextProps>
     icon?: AppIcon
     iconProps?: Partial<IconProps>
+    /** When true, animates the arc on mount and progress change; default true */
+    animated?: boolean
+    animatedProps?: Partial<MotionProps>
+    strokeLinecap?: 'round' | 'butt' | 'square'
+  }
+
+export interface ProgressCircleSegmentedStyleDef {}
+
+/**
+ * @field progress - Number of filled segments (0–`segments`).
+ * @field segments - Total number of arc segments to render.
+ * @field size - Explicit pixel size for the SVG; falls back to `styles.track.size / width / height` when omitted.
+ * @field gapAngle - Gap between segments in degrees; default `4`.
+ * @field strokeLinecap - SVG stroke line cap for each segment arc; default `'round'`.
+ * @field animated - When `true`, active segments fade in with a staggered delay; default `true`.
+ * @field animatedProps - Forwarded to each `motion.circle` segment; only used when `animated` is `true`.
+ * @field staggerDelay - Delay in seconds between consecutive segment animations; default `0.05`.
+ */
+export type ProgressCircleSegmentedProps =
+  Omit<ViewProps, 'style'> &
+  {
+    progress: number
+    segments: number
+    size?: number
+    /** Gap angle in degrees between arc segments; default 4 */
+    gapAngle?: number
+    style?: StyleProp<ProgressCircleSegmentedComposition, keyof ProgressCircleSegmentedStyleDef>
+    animated?: boolean
+    animatedProps?: Partial<MotionProps>
+    staggerDelay?: number
+    strokeLinecap?: 'round' | 'butt' | 'square'
+    debugName?: string
   }

package/src/components/Progress/index.tsx

@@ -1,6 +1,7 @@
 export * from './Bar'
 export * from './Circle'
 
+/** Shared props inherited by both `ProgressBar` and `ProgressCircle`. */
 export type ProgressPropsRoot = {
   progress: number
   style?: React.CSSProperties

package/src/components/RadioInput/index.tsx

@@ -3,14 +3,13 @@ import { Text } from '../Text'
 import { Touchable } from '../Touchable'
 import { TypeGuards } from '@codeleap/types'
 import { View } from '../View'
-import { InputBase, selectInputBaseProps } from '../InputBase'
 import { RadioOptionProps, RadioInputProps } from './types'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles'
-import { useInputBase } from '../InputBase/useInputBase'
+import { useFieldInput } from '../Field'
 import { SelectableField, fields } from '@codeleap/form'
+import { Field } from '../Field'
+import { toDataAttrs } from '../../lib'
 
 export * from './styles'
 export * from './types'
@@ -27,30 +26,21 @@ const Option = <T extends string | number>(props: RadioOptionProps<T>) => {
   } = props
 
   const isDisabled = disabled || item?.disabled
-
-  const partialStyles = useInputBasePartialStyles(
-    styles,
-    ['optionLabel', 'optionWrapper', 'optionIndicator', 'optionIndicatorInner'],
-    {
-      selectedDisabled: isDisabled && selected,
-      disabled: isDisabled,
-      selected,
-    }
-  )
+  const stateAttrs = toDataAttrs({ selected: !!selected, disabled: !!isDisabled })
 
   return (
     <React.Fragment>
       <Touchable
         debugName={`${debugName} option ${item.value}`}
-        style={partialStyles.optionWrapper}
+        style={styles.optionWrapper}
         onPress={onSelect}
         disabled={isDisabled}
       >
-        <View style={partialStyles.optionIndicator}>
-          <View style={partialStyles.optionIndicatorInner} />
+        <View style={styles.optionIndicator} {...stateAttrs}>
+          <View style={styles.optionIndicatorInner} {...stateAttrs} />
         </View>
 
-        {TypeGuards.isString(item.label) ? <Text style={partialStyles.optionLabel} text={item.label} /> : item.label}
+        {TypeGuards.isString(item.label) ? <Text style={styles.optionLabel} text={item.label} /> : item.label}
       </Touchable>
 
       {separator ? <View style={styles.optionSeparator} /> : null}
@@ -58,14 +48,16 @@ const Option = <T extends string | number>(props: RadioOptionProps<T>) => {
   )
 }
 
+/**
+ * Single-select radio group that renders each option as a `Touchable` row with an indicator circle and label, separated by optional dividers.
+ * Integrates with `@codeleap/form` via `SelectableField`; pair with `field` or `value`/`onValueChange`.
+ * Uses: `Field.Provider`, `Field.Wrapper`, `Field.Heading`, `Field.Helper`, `Touchable`, `View`, `Text`
+ */
 export const RadioInput = <T extends string | number>(props: RadioInputProps<T>) => {
-  const {
-    inputBaseProps,
-    others: radioInputProps,
-  } = selectInputBaseProps({
+  const allProps = {
     ...RadioInput.defaultProps,
     ...props,
-  })
+  }
 
   const {
     field,
@@ -75,53 +67,68 @@ export const RadioInput = <T extends string | number>(props: RadioInputProps<T>)
     style,
     disabled,
     debugName,
-  } = radioInputProps
-
-  const styles = useStylesFor(RadioInput.styleRegistryName, style)
+    label,
+    helper,
+    leftSection,
+    rightSection,
+  } = allProps
 
   const {
     wrapperRef,
     inputValue,
     onInputValueChange,
-  } = useInputBase(
-    // @ts-ignore
-    field as SelectableField<T, any>,
-    fields.selectable as () => SelectableField<T, any>,
-    { value, onValueChange }
+    validation,
+  } = useFieldInput(
+    field,
+    fields.selectable,
+    { value, onValueChange },
   )
 
+  const fieldContext = {
+    disabled: !!disabled,
+    hasValue: !!inputValue,
+    error: !!validation?.showError,
+    focused: false,
+  }
+
+  const styles = useStylesFor(RadioInput.styleRegistryName, style, fieldContext)
+
   return (
-    <InputBase
-      {...inputBaseProps}
-      ref={wrapperRef}
-      disabled={disabled}
-      style={styles}
-      debugName={debugName}
+    <Field.Provider
+      context={fieldContext}
+      label={label}
+      helper={validation?.showError ? validation?.message : helper}
+      leftSection={leftSection}
+      rightSection={rightSection}
+      componentName='radioInput'
     >
-      {options?.map((item, idx) => (
-        <Option
-          debugName={debugName}
-          item={item}
-          key={idx}
-          disabled={disabled}
-          styles={styles}
-          selected={inputValue === item.value}
-          onSelect={() => onInputValueChange(item.value)}
-          separator={idx < options?.length - 1}
-        />
-      ))}
-    </InputBase>
+      <Field.Wrapper ref={wrapperRef} style={styles.wrapper}>
+        <Field.Heading style={styles.heading} />
+
+        <View style={styles.box}>
+          {options?.map((item, idx) => (
+            <Option
+              debugName={debugName}
+              item={item}
+              key={idx}
+              disabled={disabled}
+              styles={styles}
+              selected={inputValue === item.value}
+              onSelect={() => onInputValueChange(item.value)}
+              separator={idx < options?.length - 1}
+            />
+          ))}
+        </View>
+
+        <Field.Helper style={styles.helper} />
+      </Field.Wrapper>
+    </Field.Provider>
   )
 }
 
 RadioInput.styleRegistryName = 'RadioInput'
-RadioInput.elements = [...InputBase.elements, 'option']
+RadioInput.elements = [...Field.elements, 'optionWrapper', 'optionLabel', 'optionIndicator', 'optionIndicatorInner', 'optionSeparator']
 RadioInput.rootElement = 'wrapper'
-
-RadioInput.withVariantTypes = <S extends AnyRecord, T extends string | number>(styles: S) => {
-  return RadioInput as (props: StyledComponentProps<RadioInputProps<T>, typeof styles>) => IJSX
-}
-
 RadioInput.defaultProps = {} as Partial<RadioInputProps<string | number>>
 
 WebStyleRegistry.registerComponent(RadioInput)

package/src/components/RadioInput/styles.ts

@@ -1,8 +1,4 @@
-import { IconLessInputBaseParts } from '../InputBase'
+import { FieldParts } from '../Field'
 
-type OptionParts = 'wrapper' | 'label' | 'indicator' | 'indicatorInner' | 'separator'
-type OptionStates = 'selected' | 'disabled' | 'selectedDisabled'
-
-type OptionComposition = `${OptionParts}:${OptionStates}` | OptionParts
-
-export type RadioInputComposition = IconLessInputBaseParts | `${IconLessInputBaseParts}:disabled` | `option${Capitalize<OptionComposition>}`
+type RadioInputParts = FieldParts | 'optionWrapper' | 'optionLabel' | 'optionIndicator' | 'optionIndicatorInner' | 'optionSeparator'
+export type RadioInputComposition = RadioInputParts