@codeleap/web 6.3.0 → 7.0.0

package/src/components/Tag/index.tsx

@@ -10,10 +10,16 @@ import { Badge } from '../Badge'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { AnyRecord, IJSX, mergeStyles, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
+import { toDataAttrs } from '../../lib'
 
 export * from './styles'
 export * from './types'
 
+/**
+ * Compact label chip that composes text, icons, badges, and arbitrary slot elements with pressable and disabled state variants.
+ * Renders as a `Touchable` (`<button>`) when `onPress` is provided, otherwise as a `View` (`<div>`); `:pressable` and `:disabled` style variants are applied accordingly.
+ * Uses: `Touchable`, `Icon`, `Text`, `Badge`
+ */
 export const Tag = (props: TagProps) => {
   const {
     rightComponent,
@@ -32,13 +38,14 @@ export const Tag = (props: TagProps) => {
     children,
     onPress,
     disabled,
+    context,
     ...touchableProps
   } = {
     ...Tag.defaultProps,
     ...props,
   }
 
-  const styles = useStylesFor(Tag.styleRegistryName, style)
+  const styles = useStylesFor(Tag.styleRegistryName, style, context)
 
   const compositionStyles = useCompositionStyles(['rightBadge', 'leftBadge'], styles)
 
@@ -59,8 +66,10 @@ export const Tag = (props: TagProps) => {
   const leftIconStyles = React.useMemo(() => getStylesByKey('leftIcon'), [styles, disabled, isPressable])
   const rightIconStyles = React.useMemo(() => getStylesByKey('rightIcon'), [styles, disabled, isPressable])
 
+  const dataAttrs = toDataAttrs(context)
+
   return (
-    <Wrapper disabled={disabled} {...wrapperProps} style={wrapperStyles}>
+    <Wrapper component={isPressable ? 'button' : 'div'} disabled={disabled} {...wrapperProps} style={wrapperStyles} className='tag__wrapper' {...dataAttrs}>
       {leftComponent}
       {leftBadge && (
         <Badge
@@ -68,6 +77,7 @@ export const Tag = (props: TagProps) => {
           style={compositionStyles.leftBadge}
           badge={leftBadge}
           disabled={disabled}
+          className='tag__badge tag__left_badge'
           {...leftBadgeProps}
         />
       )}
@@ -75,19 +85,21 @@ export const Tag = (props: TagProps) => {
         <Icon
           debugName={`${touchableProps?.debugName}:leftIcon`}
           style={leftIconStyles}
-          name={leftIcon}
+          icon={leftIcon}
+          className='tag__icon tag__left_icon'
           {...leftIconProps}
         />
       )}
 
-      {TypeGuards.isString(text) ? <Text text={text} style={textStyles} {...textProps} /> : text}
+      {TypeGuards.isString(text) ? <Text text={text} style={textStyles} {...textProps} className='tag__text'/> : text}
       {children}
 
       {!TypeGuards.isNil(rightIcon) && (
         <Icon
           debugName={`${touchableProps?.debugName}:rightIcon`}
           style={rightIconStyles}
-          name={rightIcon}
+          icon={rightIcon}
+          className='tag__icon tag__right_icon'
           {...rightIconProps}
         />
       )}
@@ -97,6 +109,7 @@ export const Tag = (props: TagProps) => {
           style={compositionStyles.rightBadge}
           badge={rightBadge}
           disabled={disabled}
+          className='tag__badge tag__right_badge'
           {...rightBadgeProps}
         />
       )}

package/src/components/Tag/types.ts

@@ -1,4 +1,4 @@
-import { AppIcon, StyledProp } from '@codeleap/styles'
+import { AppIcon, ComponentContext, StyleProp } from '@codeleap/styles'
 import { ReactElement } from 'react'
 import { TagComposition } from './styles'
 import { BadgeProps } from '../Badge'
@@ -8,12 +8,20 @@ import { ComponentCommonProps } from '../../types'
 import { TouchableProps } from '../Touchable'
 import { ViewProps } from '../View'
 
+export interface TagStyleDef {}
+
+/**
+ * @field onPress - When provided, the wrapper becomes a `Touchable` (rendered as `<button>`); otherwise a plain `View` (`<div>`).
+ * @field context - Merged into style resolution and spread as `data-*` attributes; `selected` drives `:selected` style variants.
+ * @field leftBadge / rightBadge - Badge count/content rendered on the respective side; full `BadgeProps` customisation via `leftBadgeProps` / `rightBadgeProps`.
+ * @field leftComponent / rightComponent - Arbitrary slot elements rendered at the outer edges, outside icon/badge slots.
+ */
 export type TagProps =
   Omit<ViewProps, 'style'> &
   Omit<TouchableProps, 'style'> &
   ComponentCommonProps &
   {
-    style?: StyledProp<TagComposition>
+    style?: StyleProp<TagComposition, keyof TagStyleDef>
     text?: TextProps<'p'>['text'] | ReactElement
     textProps?: Partial<TextProps<'p'>>
     leftIcon?: AppIcon
@@ -26,4 +34,9 @@ export type TagProps =
     rightBadge?: BadgeProps['badge']
     leftBadgeProps?: Partial<BadgeProps>
     rightBadgeProps?: Partial<BadgeProps>
+    context?: TagContext
   }
+
+export interface TagContext extends ComponentContext {
+  selected?: boolean
+}

package/src/components/Text/index.tsx

@@ -4,11 +4,32 @@ import React, { ElementType, forwardRef } from 'react'
 import { TextProps } from './types'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps, StyleProp } from '@codeleap/styles'
+
+function getVariantElement(registryName: string, style: StyleProp<any, any>): ElementType | undefined {
+  const variants: string[] = typeof style === 'string'
+    ? [style]
+    : Array.isArray(style)
+      ? style.filter((s): s is string => typeof s === 'string')
+      : []
+
+  let result: ElementType | undefined
+  for (const variant of variants) {
+    const el = WebStyleRegistry.current?.variantElementFor(registryName, variant)
+    if (el) result = el as React.ElementType
+  }
+  return result
+}
 
 export * from './styles'
 export * from './types'
 
+/**
+ * Pressable text element with debounced click handling, Framer Motion animation
+ * support, and style-variant-based element selection.
+ * Includes `Text.Span` for inline rendering.
+ * Uses: `useStylesFor`, `WebStyleRegistry`
+ */
 export const Text = (textProps: TextProps) => {
   const {
     style,
@@ -22,6 +43,7 @@ export const Text = (textProps: TextProps) => {
     onClick,
     animated,
     animatedProps,
+    getComponent,
     ref,
     ...props
   } = {
@@ -31,7 +53,7 @@ export const Text = (textProps: TextProps) => {
 
   const styles = useStylesFor(Text.styleRegistryName, style)
 
-  const Component: ElementType = animated ? (motion?.[component as string] || motion.p) : (component || 'p')
+  const defaultElement = getVariantElement(Text.styleRegistryName, style)
 
   const pressedRef = React.useRef(false)
 
@@ -72,6 +94,12 @@ export const Text = (textProps: TextProps) => {
     ...animatedProps,
   }
 
+  const Component: ElementType = getComponent
+    ? getComponent(textProps, componentProps)
+    : animated
+      ? (motion?.[(component ?? defaultElement) as string] || motion.p)
+      : (component ?? defaultElement ?? 'p')
+
   return (
     <Component {...componentProps} ref={ref} css={[styles.text, disabled && styles['text:disabled']]}>
       {text || children}
@@ -79,6 +107,10 @@ export const Text = (textProps: TextProps) => {
   )
 }
 
+Text.Span = (props: TextProps) => {
+  return <Text component={'span'} {...props} />
+}
+
 Text.styleRegistryName = 'Text'
 Text.elements = ['text']
 Text.rootElement = 'text'
@@ -89,7 +121,7 @@ Text.withVariantTypes = <S extends AnyRecord>(styles: S) => {
 
 Text.defaultProps = {
   debugName: 'Text component',
-  component: 'p',
+  component: undefined,
   text: null,
   debounce: null,
   pressDisabled: false,

package/src/components/Text/styles.ts

@@ -1 +1 @@
-export type TextComposition = 'text' | 'text:disabled'
+export type TextComposition = 'text'

package/src/components/Text/types.ts

@@ -1,19 +1,36 @@
 import { ComponentPropsWithoutRef, ElementType, RefObject } from 'react'
 import { TextComposition } from './styles'
-import { AnyRecord, StyledProp } from '@codeleap/styles'
+import { AnyRecord, StyleProp } from '@codeleap/styles'
 import { MotionProps } from 'motion/react'
 
+export interface TextStyleDef {
+
+}
+
+/**
+ * Props for the `Text` component.
+ *
+ * The rendered element is determined by the following precedence:
+ * `getComponent` > `component` > style-derived variant element > `'p'`.
+ */
 export type TextProps<T extends ElementType = 'p'> =
   Omit<ComponentPropsWithoutRef<T>, 'style'> &
   {
     component?: ElementType<AnyRecord>
+    /** Static text content; rendered alongside or instead of `children`. */
     text?: string
-    style?: StyledProp<TextComposition>
+    style?: StyleProp<TextComposition, keyof TextStyleDef>
     debugName?: string
+    /** Milliseconds to suppress repeated clicks after the first press. */
     debounce?: number
+    /** When true, click/press handlers are ignored even if provided. */
     pressDisabled?: boolean
     onPress?: (event: React.MouseEventHandler<T>) => void
+    /** When true, renders a `motion.*` element; requires `component` or a variant-mapped element. */
     animated?: boolean
+    /** Framer Motion props applied when `animated` is true. */
     animatedProps?: Partial<MotionProps>
     ref?: RefObject<HTMLParagraphElement | null>
+    /** Overrides element resolution entirely; receives raw and computed props. */
+    getComponent?: (rawProps: AnyRecord, componentProps: AnyRecord) => ElementType
   }

package/src/components/TextEditor/index.tsx

@@ -7,10 +7,16 @@ import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { useValidate } from '@codeleap/form'
+import { TypeGuards } from '@codeleap/types'
 
 export * from './styles'
 export * from './types'
 
+/**
+ * Shell for a rich-text editing surface that wraps an external Tiptap editor instance with optional validation, a toolbar slot, and a hidden `FileInput` for media uploads.
+ * Renders `null` when no `editor` is provided; validation errors surface as an inline `Text` element below the editor.
+ * Uses: `FileInput`, `View`, `Text`
+ */
 export const TextEditor = (props: TextEditorProps) => {
   const {
     children,
@@ -30,7 +36,7 @@ export const TextEditor = (props: TextEditorProps) => {
 
   const validation = useValidate(editor?.getText() ?? '', validate)
 
-  const isDisabled = !editor?.isEditable ?? null
+  const isDisabled = TypeGuards.isNil(editor?.isEditable) ? null  : !editor.isEditable
 
   const handleBlur = React.useCallback(() => {
     validation?.onInputBlurred()

package/src/components/TextEditor/types.ts

@@ -1,11 +1,18 @@
 import { RefObject } from 'react'
 import { AnyFunction } from '@codeleap/types'
-import { StyledProp } from '@codeleap/styles'
+import { StyleProp } from '@codeleap/styles'
 // import { BubbleMenuProps, Editor, FloatingMenuProps } from '@tiptap/react'
 import { FileInputRef } from '../FileInput'
 import { TextEditorComposition } from './styles'
 import { Validator } from '@codeleap/form'
 
+export interface TextEditorStyleDef {}
+
+/**
+ * Props for the `TextEditor` component.
+ * `editor` must be a Tiptap (or Tiptap-compatible) editor instance; the component attaches blur/focus listeners via `editor.on`/`editor.off`.
+ * `toolbarComponent` is rendered above the editor content area; `bubbleMenuProps` and `floatingMenuProps` are reserved for future Tiptap menu integration (currently inactive).
+ */
 export type TextEditorProps = React.PropsWithChildren<{
   editor: any & {
     getText: AnyFunction
@@ -13,7 +20,7 @@ export type TextEditorProps = React.PropsWithChildren<{
     on: AnyFunction
     off: AnyFunction
   }
-  style?: StyledProp<TextEditorComposition>
+  style?: StyleProp<TextEditorComposition, keyof TextEditorStyleDef>
   bubbleMenuProps?: any & { renderContent: React.ReactNode }
   floatingMenuProps?: any & { renderContent: React.ReactNode }
   toolbarComponent?: React.ReactElement

package/src/components/TextInput/index.tsx

@@ -1,171 +1,157 @@
 import { TypeGuards } from '@codeleap/types'
-import React, { useImperativeHandle } from 'react'
+import React, { useId, useImperativeHandle } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 import { Touchable } from '../Touchable'
-import { InputBase, selectInputBaseProps } from '../InputBase'
 import { getTestId } from '../../lib/utils/test'
 import { TextInputProps } from './types'
 import { AnyRecord, AppIcon, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { useTextInput } from './useTextInput'
-import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles'
+import { Field, getFieldIds } from '../Field'
+import { FieldStateContext } from '../Field/styles'
 
 export * from './types'
 export * from './styles'
 
+/**
+ * Single-line (or auto-growing multiline) text field with full `Field` layout support including label, helper text, left/right sections, and validation error display.
+ * Renders a plain `<input>` or `TextareaAutosize` depending on the `multiline` prop; pass `ref` to get the underlying `HTMLInputElement`.
+ * Uses: `Field.Provider`, `Field.Wrapper`, `Field.Box`, `Field.Heading`, `Field.Helper`, `Field.SectionSlot`, `useTextInput`
+ */
 export const TextInput = (props: TextInputProps) => {
   const allProps = {
     ...TextInput.defaultProps,
     ...props,
   }
 
-  const {
-    inputBaseProps,
-    others,
-  } = selectInputBaseProps(allProps)
-
   const {
     style,
     debugName,
-    visibilityToggle,
-    password,
     onPress,
-    caretColor,
-    visibleIcon,
-    hiddenIcon,
     focused,
     ref: inputRef,
+    disabled,
+    label,
+    helper,
+    leftSection,
+    rightSection,
+    wrapperRef,
+    boxRef,
+    
+    multiline,
+    onValueChange,
+    field,
+    onBlur,
+    forceError,
+    value,
+    onChangeText,
+
     ...textInputProps
-  } = others as TextInputProps
+  } = allProps as TextInputProps
 
   const styles = useStylesFor(TextInput.styleRegistryName, style)
 
+  const fieldBaseId = useId()
+  const { label: labelId, helper: helperId } = getFieldIds(fieldBaseId)
+
   const {
     isMultiline,
     isFocused: isInputFocused,
-    secureTextEntry,
+
     handleBlur,
     handleFocus,
     handleChange,
     innerInputRef,
-    wrapperRef,
+
     errorMessage,
-    toggleSecureTextEntry,
     hasMultipleLines,
     hasError,
     inputValue,
-  } = useTextInput(allProps)
+    
+  } = useTextInput({
+    multiline,
+    onValueChange,
+    field,
+    onBlur,
+    forceError,
+    value,
+    onChangeText,
+  })
 
   const isFocused = isInputFocused || focused
 
-  const isDisabled = !!inputBaseProps.disabled
+  const isDisabled = disabled
 
-  const partialStyles = useInputBasePartialStyles(styles, ['placeholder', 'selection'], {
-    disabled: isDisabled,
-    error: !!hasError,
-    focus: isFocused,
-  })
 
   const InputElement: any = isMultiline ? TextareaAutosize : 'input'
 
-  const isPressable = TypeGuards.isFunction(onPress)
 
   useImperativeHandle(inputRef, () => {
     return innerInputRef?.current
   }, [])
 
-  const visibilityToggleProps = visibilityToggle ? {
-    onPress: toggleSecureTextEntry,
-    icon: (secureTextEntry ? hiddenIcon : visibleIcon) as AppIcon,
-    debugName: `${debugName} toggle visibility`,
-  } : null
 
-  const rightIcon = inputBaseProps?.rightIcon ?? visibilityToggleProps
 
-  const buttonModeProps = isPressable ? {
-    editable: false,
-    caretHidden: true,
-  } : {}
+  const testId = getTestId(allProps)
 
-  const secureTextProps = (password && secureTextEntry) && {
-    type: 'password',
+  const fieldContext:FieldStateContext = {
+    disabled,
+    focused: isFocused,
+    hasValue: !!inputValue?.length,
+    error: hasError,
   }
 
-  const caretColorStyle = (caretColor || buttonModeProps.caretHidden) && {
-    caretColor: buttonModeProps.caretHidden ? 'transparent' : caretColor,
-  }
-
-  const inputBaseAction = isPressable ? 'onPress' : 'onClick'
-
-  const testId = getTestId(textInputProps)
-
-  return (
-    <InputBase
-      innerWrapper={isPressable ? Touchable : undefined}
-      {...inputBaseProps}
-      ref={wrapperRef}
-      debugName={debugName}
-      error={hasError ? errorMessage : null}
-      style={{
-        ...styles,
-        innerWrapper: {
-          ...styles.innerWrapper,
-          ...(isMultiline ? styles['innerWrapper:multiline'] : {}),
-          ...(hasMultipleLines ? styles['innerWrapper:hasMultipleLines'] : {}),
-        },
-      }}
-      innerWrapperProps={{
-        ...(inputBaseProps.innerWrapperProps || {}),
-        [inputBaseAction]: () => {
-          focus()
-          if (isPressable) onPress?.()
-        },
-        debugName,
-      }}
-      rightIcon={rightIcon as any}
-      focused={isFocused}
-    >
-      <InputElement
-        editable={`${!isPressable && !isDisabled}`}
-        {...buttonModeProps}
-        {...secureTextProps}
-        {...textInputProps}
-        onBlur={handleBlur as any}
-        onFocus={handleFocus as any}
-        css={[
-          styles.input,
-          isMultiline && styles['input:multiline'],
-          isFocused && styles['input:focus'],
-          hasError && styles['input:error'],
-          isDisabled && styles['input:disabled'],
-          hasMultipleLines && styles['input:hasMultipleLines'],
-          {
-            '&::placeholder': partialStyles?.placeholder,
-          },
-          {
-            '&::selection': partialStyles?.selection,
-          },
-          {
-            '&:focus': [
-              { outline: 'none', borderWidth: 0, borderColor: 'transparent' },
-              isFocused && styles['input:focus'],
-              caretColorStyle,
-            ],
-          },
-        ] as any}
-        onChange={handleChange}
-        ref={innerInputRef}
-        value={inputValue}
-        data-testid={testId}
-      />
-    </InputBase>
-  )
+  const _helper = (hasError ? errorMessage : (helper ?? null))
+
+  return <Field.Provider
+    id={fieldBaseId}
+    context={fieldContext}
+    label={label}
+    helper={_helper}
+    rightSection={rightSection}
+    leftSection={leftSection}
+    wrapperRef={wrapperRef}
+    boxRef={boxRef}
+    componentName='text_input'
+  >
+    <Field.Wrapper style={styles.wrapper}>
+      <Field.Heading style={styles.heading}/>
+      <Field.Box style={styles.box} onPress={onPress}>
+        <Field.SectionSlot position='left' style={styles.leftSection}/>
+        <InputElement
+
+          disabled={disabled}
+
+          onBlur={handleBlur as any}
+          onFocus={handleFocus as any}
+          aria-labelledby={label ? labelId : undefined}
+          aria-describedby={_helper ? helperId : undefined}
+          className='text_input__input'
+          css={[
+            styles.input,
+            isMultiline && styles['input:multiline'],
+            isFocused && styles['input:focus'],
+            hasError && styles['input:error'],
+            isDisabled && styles['input:disabled'],
+            hasMultipleLines && styles['input:hasMultipleLines']
+          ] as any}
+          onChange={handleChange}
+          ref={innerInputRef}
+          value={inputValue}
+          data-testid={testId}
+          {...textInputProps}
+        />
+        <Field.SectionSlot position='right' style={styles.rightSection}/>
+      </Field.Box>
+      <Field.Helper style={styles.helper}/>
+    </Field.Wrapper>
+  </Field.Provider>
 
 }
 
 TextInput.styleRegistryName = 'TextInput'
-TextInput.elements = [...InputBase.elements, 'input', 'placeholder', 'selection']
+TextInput.elements = [...Field.elements, 'input', 'placeholder', 'selection']
 TextInput.rootElement = 'wrapper'
 
 TextInput.withVariantTypes = <S extends AnyRecord>(styles: S) => {
@@ -173,8 +159,7 @@ TextInput.withVariantTypes = <S extends AnyRecord>(styles: S) => {
 }
 
 TextInput.defaultProps = {
-  hiddenIcon: 'input-visiblity:hidden' as AppIcon,
-  visibleIcon: 'input-visiblity:visible' as AppIcon,
+
 } as TextInputProps
 
 WebStyleRegistry.registerComponent(TextInput)

package/src/components/TextInput/styles.ts

@@ -1,10 +1,6 @@
-import { ActionIconParts } from '../ActionIcon'
-import { InputBaseParts, InputBaseStates } from '../InputBase'
+import { ButtonParts } from '../Button'
+import { FieldParts } from '../Field'
 
-type TextInputParts = InputBaseParts | 'input' | 'placeholder' | 'selection'
+type TextInputParts = FieldParts | 'input' | 'placeholder' | 'selection'
 
-export type TextInputStates = InputBaseStates | 'multiline' | 'hasMultipleLines'
-
-export type IconParts = Exclude<ActionIconParts, 'icon' | 'icon:disabled'>
-
-export type TextInputComposition = `${TextInputParts}:${TextInputStates}` | TextInputParts
+export type TextInputComposition = TextInputParts

package/src/components/TextInput/types.ts

@@ -1,34 +1,47 @@
 import { TouchableProps } from '../Touchable'
-import { AppIcon, StyledProp } from '@codeleap/styles'
-import { InputBaseProps } from '../InputBase'
+import { AppIcon, StyleProp } from '@codeleap/styles'
 import { HTMLProps } from '../../types'
 import { TextInputComposition } from './styles'
 import { Field } from '@codeleap/form'
 import { RefObject } from 'react'
+import { FieldStateContext } from '../Field/styles'
+import { FieldExternalProps, FieldProps } from '../Field'
 
 type NativeTextInputProps = HTMLProps<'input'>
 
 export type InputRef = HTMLInputElement
 
+export interface TextInputStyleDef {}
+
+/**
+ * Props for the `TextInput` component.
+ * Accepts either a controlled `value`/`onValueChange` pair or a `field` from `@codeleap/form`; the two are mutually exclusive — prefer `field` when inside a form.
+ * `multiline` swaps the underlying `<input>` for a `TextareaAutosize` element.
+ * `forceError` bypasses field validation and displays an error string unconditionally.
+ */
 export type TextInputProps =
-  Omit<InputBaseProps, 'style' | 'ref'> &
+  FieldExternalProps &
   Omit<NativeTextInputProps, 'value' | 'crossOrigin' | 'ref' | 'style'> &
   {
-    style?: StyledProp<TextInputComposition>
-    password?: boolean
+    style?: StyleProp<TextInputComposition, keyof TextInputStyleDef>
+
     debugName?: string
-    visibilityToggle?: boolean
+
     multiline?: boolean
     onPress?: TouchableProps['onPress']
-    caretColor?: string
-    focused?: boolean
+
     forceError?: string
-    rows?: number
-    visibleIcon?: AppIcon
-    hiddenIcon?: AppIcon
+
     field?: Field<string, any, any>
     value?: string
     onValueChange?: (value: string) => void
     onChangeText?: NativeTextInputProps['onChange']
     ref?: RefObject<InputRef | null>
+    focused?: boolean
+    disabled?: boolean
   }
+
+/** Field-state context shape passed to `Field.Provider` by `TextInput`. */
+export interface TextInputContext extends FieldStateContext {
+  multiline?: boolean
+}