@codeleap/web 6.3.0 → 7.0.0

package/src/components/Slider/index.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { TypeGuards } from '@codeleap/types'
 import { onMount, useRef } from '@codeleap/hooks'
 import { View } from '../View'
-import { InputBase, selectInputBaseProps } from '../InputBase'
 import { Text } from '../Text'
 import {
   Root as SliderContainer,
@@ -13,11 +12,12 @@ import {
 } from '@radix-ui/react-slider'
 import { SliderProps, TrackMarkProps } from './types'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
+import { mergeStyles } from '@codeleap/styles'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { useInputBase } from '../InputBase/useInputBase'
+import { useFieldInput } from '../Field'
 import { fields } from '@codeleap/form'
-import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles'
+import { Field } from '../Field'
+import { FieldStateContext } from '../Field/styles'
 
 export * from './styles'
 export * from './types'
@@ -34,14 +34,16 @@ const DefaultSliderTrackMark = (props: TrackMarkProps) => {
   return <Text text={props.content} style={style} />
 }
 
+/**
+ * Radix UI-backed range slider with `Field` layout, optional track marks, and a computed value indicator in the helper slot.
+ * Supports both single-thumb and multi-thumb (range) modes determined by whether `value` is a scalar or array.
+ * Uses: `Field.Provider`, `Field.Wrapper`, `Field.Heading`, `Field.Helper`, `View`, `Text`
+ */
 export const Slider = (props: SliderProps) => {
-  const {
-    inputBaseProps,
-    others,
-  } = selectInputBaseProps({
+  const allProps = {
     ...Slider.defaultProps,
     ...props,
-  })
+  }
 
   const {
     onValueChange,
@@ -49,6 +51,9 @@ export const Slider = (props: SliderProps) => {
     value: _value,
     field,
     label,
+    helper,
+    leftSection,
+    rightSection,
     debugName,
     style,
     disabled,
@@ -58,21 +63,19 @@ export const Slider = (props: SliderProps) => {
     min,
     defaultValue: defaultSliderValue,
     indicatorLabel,
-    description,
     minStepsBetweenThumbs,
     step,
     onPressThumbSetValue,
     onPressThumb,
     ...sliderProps
-  } = others
-
-  const styles = useStylesFor(Slider.styleRegistryName, style)
+  } = allProps
 
   const {
     wrapperRef,
     inputValue,
     onInputValueChange,
-  } = useInputBase(field, fields.number, { value: _value, onValueChange })
+    validation,
+  } = useFieldInput(field, fields.number, { value: _value, onValueChange })
 
   const isUniqueValue = !TypeGuards.isArray(inputValue)
   const value = isUniqueValue ? [inputValue] : inputValue
@@ -105,19 +108,20 @@ export const Slider = (props: SliderProps) => {
     return Object.keys(trackMarks).map((key) => Number(key))
   }, [trackMarksHaveContent])
 
-  const partialStyles = useInputBasePartialStyles(
-    styles,
-    ['thumb', 'track', 'selectedTrack', 'unselectedTrack', 'sliderContainer', 'trackMark', 'trackMarkWrapper'],
-    { disabled }
-  )
+  const fieldContext: FieldStateContext = {
+    disabled: !!disabled,
+    hasValue: true,
+    error: !!validation?.showError,
+    focused: false,
+  }
+
+  const styles = useStylesFor(Slider.styleRegistryName, style, fieldContext)
 
-  const trackStyle = React.useMemo(() => {
-    return mergeStyles([partialStyles?.track, partialStyles.unselectedTrack])
-  }, [partialStyles?.track, partialStyles.unselectedTrack])
+  const trackStyle = mergeStyles([styles.track, styles.unselectedTrack])
 
-  const sliderLabel = React.useMemo(() => {
+  const sliderHelper = React.useMemo(() => {
     if (TypeGuards.isNil(indicatorLabel) || !indicatorLabel?.order && !indicatorLabel?.transformer) {
-      return description
+      return helper
     }
 
     if (TypeGuards.isFunction(indicatorLabel?.transformer)) {
@@ -136,127 +140,125 @@ export const Slider = (props: SliderProps) => {
 
       return str
     } else {
-      return description
+      return helper
     }
   }, [value])
 
   return (
-    <InputBase
-      {...inputBaseProps}
-      ref={wrapperRef}
-      disabled={disabled}
-      style={styles}
-      labelAsRow
-      description={sliderLabel}
+    <Field.Provider
+      context={fieldContext}
+      label={label}
+      helper={validation?.showError ? validation?.message : sliderHelper}
+      leftSection={leftSection}
+      rightSection={rightSection}
+      componentName='slider'
     >
-      <SliderContainer
-        {...sliderProps}
-        step={step}
-        min={min}
-        max={max}
-        disabled={disabled}
-        defaultValue={defaultValue}
-        onValueCommit={handleValueCommit}
-        onValueChange={handleChange}
-        style={partialStyles?.sliderContainer}
-        value={value}
-        minStepsBetweenThumbs={minStepsBetweenThumbs}
-      >
-        <SliderTrack style={trackStyle}>
-          <SliderRange style={partialStyles?.selectedTrack} />
-        </SliderTrack>
-
-        {defaultValue.map((_, i) => (
-          <SliderThumb
-            key={i}
-            style={partialStyles?.thumb}
-            onClick={() => {
-              if (onPressThumbSetValue) onInputValueChange?.(value)
-              if (TypeGuards.isFunction(onPressThumb)) onPressThumb?.(value, i)
-            }}
-          />
-        ))}
-      </SliderContainer>
-
-      {trackMarksProp ?
-        <View style={partialStyles?.trackMarkWrapper}>
-          {
-            trackMarksProp.map((_, idx) => {
-              let idxStyle = {}
-
-              const relativeValue = Number(trackMarksProp[idx])
-
-              if (idx === 0) {
-                idxStyle = styles.firstTrackMark
-              } else if (idx === trackMarksProp.length - 1) {
-                idxStyle = styles.lastTrackMark
-              } else {
-                const markerPosition = (relativeValue / max) * 100
-
-                idxStyle = {
-                  position: 'absolute',
-                  left: `${markerPosition}%`,
-                  top: '50%',
-                  transform: `translate(-50%, -50%)`,
+      <Field.Wrapper ref={wrapperRef} style={styles.wrapper}>
+        
+        <Field.Heading style={styles.heading} />
+       
+
+        <SliderContainer
+          {...sliderProps}
+          step={step}
+          min={min}
+          max={max}
+          disabled={disabled}
+          defaultValue={defaultValue}
+          onValueCommit={handleValueCommit}
+          onValueChange={handleChange}
+          css={styles.sliderContainer}
+          value={value}
+          minStepsBetweenThumbs={minStepsBetweenThumbs}
+        >
+          <SliderTrack css={trackStyle}  >
+            <SliderRange css={styles.selectedTrack} />
+          </SliderTrack>
+
+          {defaultValue.map((_, i) => (
+            <SliderThumb
+              key={i}
+              css={styles.thumb}
+               
+              onClick={() => {
+                if (onPressThumbSetValue) onInputValueChange?.(value)
+                if (TypeGuards.isFunction(onPressThumb)) onPressThumb?.(value, i)
+              }}
+            />
+          ))}
+        </SliderContainer>
+        
+        {trackMarksProp ?
+          <View style={styles.trackMarkWrapper}>
+            {
+              trackMarksProp.map((_, idx) => {
+                let idxStyle = {}
+
+                const relativeValue = Number(trackMarksProp[idx])
+
+                if (idx !== 0 && idx !== trackMarksProp.length - 1) {
+                  const markerPosition = (relativeValue / max) * 100
+
+                  idxStyle = {
+                    position: 'absolute',
+                    left: `${markerPosition}%`,
+                    top: '50%',
+                    transform: `translate(-50%, -50%)`,
+                  }
                 }
-              }
-
-              const style = mergeStyles([partialStyles?.trackMark, idxStyle])
-
-              if (!trackMarksHaveContent) {
-                return <SliderTrackMark
-                  index={idx}
-                  style={style}
-                  key={idx}
-                />
-              }
-
-              const content = trackMarks[relativeValue]
-
-              return (
-                <SliderTrackMark
-                  index={idx}
-                  content={content}
-                  style={style}
-                  key={idx}
-                />
-              )
-            })
-          }
-        </View>
-        : null}
-    </InputBase>
+
+                const style = mergeStyles([styles.trackMark, idxStyle])
+
+                if (!trackMarksHaveContent) {
+                  return <SliderTrackMark
+                    index={idx}
+                    style={style}
+                    key={idx}
+                  />
+                }
+
+                const content = trackMarks[relativeValue]
+
+                return (
+                  <SliderTrackMark
+                    index={idx}
+                    content={content}
+                    style={style}
+                    key={idx}
+                  />
+                )
+              })
+            }
+          </View>
+          : null}
+        <Field.Helper style={styles.helper} />
+      </Field.Wrapper>
+    </Field.Provider>
   )
 }
 
 Slider.styleRegistryName = 'Slider'
 
 Slider.elements = [
-  ...InputBase.elements,
+  ...Field.elements,
   'thumb',
   'track',
   'selectedTrack',
   'unselectedTrack',
   'trackMark',
-  'firstTrackMark',
-  'lastTrackMark',
   'trackMarkWrapper',
   'sliderContainer',
 ]
 
 Slider.rootElement = 'wrapper'
 
-Slider.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Slider as (props: StyledComponentProps<SliderProps, typeof styles>) => IJSX
-}
-
 Slider.defaultProps = {
   max: 100,
   min: 0,
   minStepsBetweenThumbs: 0,
   defaultValue: [],
   indicatorLabel: null,
-  description: null,
+  helper: null,
   step: 1,
   onPressThumbSetValue: false,
   onPressThumb: null,

package/src/components/Slider/styles.ts

@@ -1,18 +1,13 @@
-import { IconLessInputBaseParts, InputBaseParts, InputBaseStates } from '../InputBase'
+import { FieldParts } from '../Field'
 
 type SliderParts =
-	InputBaseParts |
+	FieldParts |
 	'thumb' |
 	'track' |
 	'selectedTrack' |
 	'unselectedTrack' |
 	'trackMark' |
-	'firstTrackMark' |
-	'lastTrackMark' |
 	'trackMarkWrapper' |
-	'sliderContainer' |
-	IconLessInputBaseParts
+	'sliderContainer'
 
-type SliderStates = Exclude<InputBaseStates, 'focus'>
-
-export type SliderComposition = `${SliderParts}:${SliderStates}` | SliderParts
+export type SliderComposition = SliderParts

package/src/components/Slider/types.ts

@@ -1,14 +1,24 @@
-import { StyledProp } from '@codeleap/styles'
-import { InputBaseProps } from '../InputBase'
+import { ICSS, StyleProp } from '@codeleap/styles'
 import { SliderComposition } from './styles'
 import { SliderProps as PrimitiveSliderProps } from '@radix-ui/react-slider'
 import { CSSProperties } from 'react'
 import { NumberField } from '@codeleap/form'
+import { FieldProps } from '../Field'
 
-export type SliderProps = 
+export interface SliderStyleDef {
+  __internal: Record<SliderComposition, ICSS>
+}
+
+/**
+ * Props for `Slider`.
+ * Pass a single `number` for a single-thumb slider or `number[]` for a range slider; the shape determines whether `onValueChange` receives a scalar or array.
+ * `indicatorLabel` drives the `helper` slot with a formatted string derived from the current thumb values — provide `order` (index array) for the default join format or `transformer` for full control.
+ * `trackMarks` is either a plain array of numbers (position-only marks) or a `Record<number, string | ReactNode>` when marks carry labels.
+ * `onPressThumb` fires when a thumb is clicked; set `onPressThumbSetValue` to also commit the current value at that moment.
+ */
+export type SliderProps =
   Partial<Omit<PrimitiveSliderProps, 'value' | 'onValueChange' | 'style'>> &
-  Pick<InputBaseProps, 'disabled' | 'debugName' | 'description' | 'label'> & 
-  {
+  Pick<FieldProps, 'label' | 'helper' | 'leftSection' | 'rightSection'> & {
     indicatorLabel?: {
       order?: number[]
       separator?: string
@@ -17,13 +27,16 @@ export type SliderProps =
     field?: NumberField<any>
     value?: number | number[]
     onValueChange?: (val: number | number[]) => void
-    style?: StyledProp<SliderComposition>
+    style?: StyleProp<SliderComposition, keyof SliderStyleDef>
     trackMarks?: Record<number, string>
     trackMarkComponent?: React.ComponentType<TrackMarkProps>
     onPressThumbSetValue?: boolean
     onPressThumb?: (value: number | number[], thumbIndex: number) => void
+    disabled?: boolean
+    debugName?: string
   }
 
+/** Props received by the custom or default track-mark renderer in `Slider`. */
 export type TrackMarkProps = {
   index: number
   content?: string | React.ReactNode

package/src/components/Switch/index.tsx

@@ -1,137 +1,101 @@
-import React from 'react'
-import { InputBase, InputBaseDefaultOrder, selectInputBaseProps } from '../InputBase'
-import { useAnimatedVariantStyles } from '../../lib'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { motion } from 'motion/react'
-import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { SwitchProps } from './types'
-import { useInputBase } from '../InputBase/useInputBase'
+import { SwitchFieldContext, SwitchProps } from './types'
+import { useFieldInput } from '../Field'
 import { fields } from '@codeleap/form'
+import { Field } from '../Field'
+import { toDataAttrs } from '../../lib'
+import { View } from '../View'
+import { Touchable } from '../Touchable'
 
 export * from './styles'
 export * from './types'
 
-const reversedOrder = [...InputBaseDefaultOrder].reverse()
-
+/**
+ * Boolean toggle control rendered as a sliding track-and-thumb with `Field` layout support (label, helper, sections).
+ * Toggles on click or Enter keypress; `disabled` suppresses both.
+ * Uses: `Field.Provider`, `Field.Wrapper`, `Field.Heading`, `Field.Helper`, `Touchable`, `View`
+ */
 export const Switch = (props: SwitchProps) => {
-  const {
-    inputBaseProps,
-    others: switchProps,
-  } = selectInputBaseProps({
+  const allProps = {
     ...Switch.defaultProps,
     ...props,
-  })
+  }
 
   const {
     style,
-    value,
     disabled,
     debugName,
-    onValueChange,
+    label,
+    helper,
+    leftSection,
+    rightSection,
+    value,
     onChange,
+    onValueChange,
     switchOnLeft,
     field,
-  } = switchProps
-
-  const styles = useStylesFor(Switch.styleRegistryName, style)
+  } = allProps
 
   const {
-    validation,
     wrapperRef,
     inputValue,
     onInputValueChange,
-  } = useInputBase<boolean>(field, fields.boolean, { value, onValueChange })
-
-  const trackAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
-    animatedProperties: ['track:off', 'track:disabled', 'track:on', 'track:disabled-on', 'track:disabled-off'],
-    updater: () => {
-      'worklet'
-      let disabledStyle = {}
-      if (disabled) {
-        disabledStyle = inputValue ? styles['track:disabled-on'] : styles['track:disabled-off']
-      }
-      const style = inputValue ? styles['track:on'] : styles['track:off']
-
-      return {
-        ...style,
-        ...disabledStyle,
-      }
-    },
-    dependencies: [inputValue, disabled],
-  })
-
-  const thumbAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
-    animatedProperties: ['thumb:off', 'thumb:disabled', 'thumb:on', 'thumb:disabled-off', 'thumb:disabled-on'],
-    updater: () => {
-      'worklet'
-      let disabledStyle = {}
-      if (disabled) {
-        disabledStyle = inputValue ? styles['thumb:disabled-on'] : styles['thumb:disabled-off']
-      }
-      const style = inputValue ? styles['thumb:on'] : styles['thumb:off']
-      return {
-        ...style,
-        ...disabledStyle,
-      }
-    },
-    dependencies: [inputValue, disabled],
-  })
-
-  // @ts-expect-error icss type
-  const _switchOnLeft = switchOnLeft ?? styles.__props?.switchOnLeft
-
-  const thumbStyles = mergeStyles([styles.thumb, disabled && styles['thumb:disabled']])
-  const trackStyles = mergeStyles([styles.track, disabled && styles['track:disabled']])
+    validation,
+  } = useFieldInput<boolean>(field, fields.boolean, { value, onValueChange })
 
   const handleChange = (e) => {
     if (disabled) return
     if (e?.type === 'click' || e?.keyCode === 13 || e?.key === 'Enter') {
       onInputValueChange?.(!inputValue)
-      if (onChange) onChange?.(!inputValue)
+      onChange?.(!inputValue)
     }
   }
 
+  const fieldContext: SwitchFieldContext = {
+    disabled: !!disabled,
+    hasValue: !!inputValue,
+    error: !!validation?.showError,
+    focused: false,
+    switchOnLeft: !!switchOnLeft,
+  }
+
+  const styles = useStylesFor(Switch.styleRegistryName, style, fieldContext)
+
+  const stateAttrs = toDataAttrs({ value: !!inputValue, disabled: !!disabled })
+
   return (
-    <InputBase
-      {...inputBaseProps}
-      ref={wrapperRef}
-      debugName={debugName}
-      style={styles}
-      order={_switchOnLeft ? reversedOrder : InputBaseDefaultOrder}
-      disabled={disabled}
-      noError
+    <Field.Provider
+      context={fieldContext}
+      label={label}
+      helper={validation?.showError ? validation?.message : helper}
+      leftSection={leftSection}
+      rightSection={rightSection}
+      componentName='switch'
     >
-      <motion.div
-        style={trackStyles}
-        initial={false}
-        animate={trackAnimation}
-        transition={styles['track:transition']}
-        onClick={handleChange}
-        onKeyDown={handleChange}
-        tabIndex={0}
-      >
-        <motion.div
-          style={thumbStyles}
-          initial={false}
-          animate={thumbAnimation}
-          transition={styles['thumb:transition']}
-        />
-      </motion.div>
-    </InputBase>
+      <Field.Wrapper ref={wrapperRef} style={styles.wrapper}>
+        <Field.Heading style={styles.heading} />
+        
+        <Touchable
+          debugName={debugName}
+          style={styles.track}
+          {...stateAttrs}
+          onClick={handleChange}
+          onKeyDown={handleChange}
+          tabIndex={0}
+        >
+          <View style={styles.thumb} {...stateAttrs} />
+        </Touchable>
+        
+        <Field.Helper style={styles.helper} />
+      </Field.Wrapper>
+    </Field.Provider>
   )
 }
 
 Switch.styleRegistryName = 'Switch'
-Switch.elements = [...InputBase.elements, 'track', 'thumb', '__props']
+Switch.elements = [...Field.elements, 'track', 'thumb']
 Switch.rootElement = 'wrapper'
-
-Switch.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Switch as (props: StyledComponentProps<SwitchProps, typeof styles>) => IJSX
-}
-
 Switch.defaultProps = {} as Partial<SwitchProps>
 
 WebStyleRegistry.registerComponent(Switch)

package/src/components/Switch/styles.ts

@@ -1,15 +1,4 @@
-import { InputBaseParts, InputBaseStates } from '../InputBase'
+import { FieldParts } from '../Field'
 
-type AnimatableParts = 'track' | 'thumb'
-export type SwitchParts = InputBaseParts | AnimatableParts
-
-export type SwitchAnimationStates = 'on' | 'off' | 'disabled-on' | 'disabled-off'
-
-export type SwitchStates = InputBaseStates
-
-export type SwitchComposition =
-  | SwitchParts
-  | `${SwitchParts}:${SwitchStates}`
-  | `${AnimatableParts}:transition`
-  | `${AnimatableParts}:${SwitchAnimationStates}`
-  | '__props'
+type SwitchParts = FieldParts | 'track' | 'thumb'
+export type SwitchComposition = SwitchParts

package/src/components/Switch/types.ts

@@ -1,15 +1,30 @@
-import { StyledProp } from '@codeleap/styles'
-import { InputBaseProps } from '../InputBase'
-import { SwitchComposition } from './styles'
 import { BooleanField } from '@codeleap/form'
+import { ICSS, StyleProp } from '@codeleap/styles'
+import { SwitchComposition } from './styles'
+import { FieldProps } from '../Field'
+import { FieldStateContext } from '../Field/styles'
+
+export interface SwitchStyleDef {
+  __internal: Record<SwitchComposition, ICSS>
+}
+
+/** Extends `FieldStateContext` with layout direction for the toggle track. */
+export interface SwitchFieldContext extends FieldStateContext {
+  switchOnLeft?: boolean
+}
 
-export type SwitchProps = 
-  Pick<InputBaseProps, 'debugName' | 'disabled' | 'label'> & 
-  {
-    style?: StyledProp<SwitchComposition>
+/**
+ * Props for `Switch`.
+ * `switchOnLeft` moves the toggle track to the left of the label; this is reflected as a context flag so styles can adapt via variants.
+ */
+export type SwitchProps =
+  Pick<FieldProps, 'label' | 'helper' | 'leftSection' | 'rightSection'> & {
+    style?: StyleProp<SwitchComposition, keyof SwitchStyleDef>
     onChange?: (value: boolean) => void
     switchOnLeft?: boolean
     field?: BooleanField<any>
     value?: boolean
     onValueChange?: (value: boolean) => void
+    disabled?: boolean
+    debugName?: string
   }