@furystack/shades-common-components 10.0.35 → 12.0.0

package/src/components/inputs/input.tsx

@@ -1,10 +1,12 @@
 import type { PartialElement } from '@furystack/shades'
-import { Shade, attachStyles, createComponent } from '@furystack/shades'
-import { ObservableValue } from '@furystack/utils'
+import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { Palette } from '../../services/theme-provider-service.js'
 import { ThemeProviderService } from '../../services/theme-provider-service.js'
 import { FormService } from '../form.js'
 
+const emptyValidity = {} as ValidityState
+
 export type ValidInputValidationResult = { isValid: true }
 
 export type InvalidInputValidationResult = { isValid: false; message: string }
@@ -71,79 +73,6 @@ export type TextInputState = {
   value: string
   focused: boolean
   validity: ValidityState
-  element: JSX.Element<TextInputProps>
-}
-
-const getLabelStyle = ({
-  themeProvider,
-  props,
-  state,
-  validationResult,
-}: {
-  themeProvider: ThemeProviderService
-  props: TextInputProps
-  state: TextInputState
-  validationResult?: InputValidationResult
-}): Partial<CSSStyleDeclaration> => {
-  const isError = state.validity?.valid === false || validationResult?.isValid === false
-  const isOutlined = props.variant === 'outlined'
-  const isContained = props.variant === 'contained'
-
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    fontSize: '11px',
-    fontWeight: '500',
-    letterSpacing: '0.01em',
-    color: props.disabled
-      ? themeProvider.theme.text.disabled
-      : isError
-        ? themeProvider.theme.palette.error.main
-        : state.focused
-          ? themeProvider.theme.palette[props.defaultColor || 'primary'].main
-          : themeProvider.theme.text.secondary,
-    marginBottom: '1.25em',
-    padding: '12px 14px',
-    borderRadius: '8px',
-    background: isContained
-      ? themeProvider
-          .getRgbFromColorString(
-            isError
-              ? themeProvider.theme.palette.error.main
-              : themeProvider.theme.palette[props.defaultColor || 'primary'].main,
-          )
-          .update('a', state.focused ? 0.12 : 0.08)
-          .toString()
-      : 'transparent',
-    border:
-      isOutlined || isContained
-        ? `2px solid ${
-            isError
-              ? themeProvider.theme.palette.error.main
-              : state.focused
-                ? themeProvider.theme.palette[props.defaultColor || 'primary'].main
-                : themeProvider.getRgbFromColorString(themeProvider.theme.text.secondary).update('a', 0.3).toString()
-          }`
-        : `2px solid transparent`,
-    boxShadow:
-      state.focused && !props.disabled
-        ? `0 0 0 3px ${themeProvider
-            .getRgbFromColorString(
-              isError
-                ? themeProvider.theme.palette.error.main
-                : themeProvider.theme.palette[props.defaultColor || 'primary'].main,
-            )
-            .update('a', 0.15)
-            .toString()}`
-        : 'none',
-    filter: props.disabled ? 'grayscale(100%)' : 'none',
-    opacity: props.disabled ? '0.5' : '1',
-    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
-    cursor: props.disabled ? 'not-allowed' : 'text',
-    ...props.labelProps?.style,
-  }
 }
 
 const getDefaultMessagesForValidityState = (state: ValidityState) => {
@@ -180,181 +109,225 @@ const getDefaultMessagesForValidityState = (state: ValidityState) => {
 
 export const Input = Shade<TextInputProps>({
   shadowDomName: 'shade-input',
-  constructed: ({ injector, element }) => {
-    if (injector.cachedSingletons.has(FormService)) {
-      const input = element.querySelector('input') as HTMLInputElement
-      const formService = injector.getInstance(FormService)
-      formService.inputs.add(input)
-      return () => formService.inputs.delete(input)
-    }
-  },
-  render: ({ props, injector, useObservable, element }) => {
-    const themeProvider = injector.getInstance(ThemeProviderService)
+  css: {
+    display: 'block',
+    marginBottom: '1.25em',
 
-    const updateState = (newState: TextInputState) => {
-      const label = element.querySelector('label') as HTMLLabelElement
-      const input = element.querySelector('input') as HTMLInputElement
-
-      newState.value = input?.value || newState.value
-      newState.validity = input?.validity || newState.validity
-      newState.validity.toJSON = () => {
-        return {
-          valid: newState.validity.valid,
-          valueMissing: newState.validity.valueMissing,
-          typeMismatch: newState.validity.typeMismatch,
-          patternMismatch: newState.validity.patternMismatch,
-          tooLong: newState.validity.tooLong,
-          tooShort: newState.validity.tooShort,
-          rangeUnderflow: newState.validity.rangeUnderflow,
-          rangeOverflow: newState.validity.rangeOverflow,
-          stepMismatch: newState.validity.stepMismatch,
-          badInput: newState.validity.badInput,
-        }
-      }
+    // Base label styles
+    '& label': {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      fontWeight: cssVariableTheme.typography.fontWeight.medium,
+      letterSpacing: '0.01em',
+      padding: '12px 14px',
+      borderRadius: cssVariableTheme.shape.borderRadius.md,
+      transition: `all ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.default}`,
+      cursor: 'text',
+      color: cssVariableTheme.text.secondary,
+      background: 'transparent',
+      border: '2px solid transparent',
+      boxShadow: 'none',
+    },
 
-      const validationResult = props.getValidationResult?.({ state: newState })
+    // Outlined variant - default border
+    '&[data-variant="outlined"] label': {
+      borderColor: cssVariableTheme.action.subtleBorder,
+    },
 
-      if (validationResult?.isValid === false || newState.validity?.valid === false) {
-        element.setAttribute('data-validation-failed', 'true')
-      } else {
-        element.removeAttribute('data-validation-failed')
-      }
+    // Contained variant - background using color-mix for theme-aware alpha
+    '&[data-variant="contained"] label': {
+      borderColor: cssVariableTheme.action.subtleBorder,
+      background: 'color-mix(in srgb, var(--input-primary-color) 8%, transparent)',
+    },
 
-      attachStyles(label, { style: getLabelStyle({ themeProvider, props, state: newState, validationResult }) })
-
-      const helper = element.querySelector<HTMLSpanElement>('span.helperText')
-      const helperNode =
-        (validationResult?.isValid === false && validationResult?.message) ||
-        props.getHelperText?.({ state: newState, validationResult }) ||
-        getDefaultMessagesForValidityState(newState.validity) ||
-        ''
-      if (helper) {
-        helper.replaceChildren(helperNode)
-        attachStyles(helper, {
-          style: {
-            fontSize: '11px',
-            marginTop: '6px',
-            opacity: '0.85',
-            lineHeight: '1.4',
-          },
-        })
-      }
+    // Focus state using :focus-within (color change for all variants)
+    '&:focus-within label': {
+      color: 'var(--input-primary-color)',
+    },
 
-      const startIcon = element.querySelector<HTMLSpanElement>('span.startIcon')
-      if (startIcon) {
-        startIcon.replaceChildren(props.getStartIcon?.({ state: newState, validationResult }) || '')
-        attachStyles(startIcon, {
-          style: {
-            display: 'flex',
-            alignItems: 'center',
-            fontSize: '16px',
-          },
-        })
-      }
+    // Focus state for outlined/contained variants - add border and shadow
+    '&[data-variant="outlined"]:focus-within label, &[data-variant="contained"]:focus-within label': {
+      borderColor: 'var(--input-primary-color)',
+      boxShadow: cssVariableTheme.action.focusRing,
+    },
+    '&[data-variant="contained"]:focus-within label': {
+      background: 'color-mix(in srgb, var(--input-primary-color) 12%, transparent)',
+    },
+
+    // Invalid/error state
+    '&[data-invalid] label': {
+      color: 'var(--input-error-color)',
+    },
+    '&[data-invalid][data-variant="outlined"] label, &[data-invalid][data-variant="contained"] label': {
+      borderColor: 'var(--input-error-color)',
+    },
+    '&[data-invalid][data-variant="contained"] label': {
+      background: 'color-mix(in srgb, var(--input-error-color) 8%, transparent)',
+    },
+    '&[data-invalid]:focus-within label': {
+      color: 'var(--input-error-color)',
+    },
+    '&[data-invalid][data-variant="outlined"]:focus-within label, &[data-invalid][data-variant="contained"]:focus-within label':
+      {
+        borderColor: 'var(--input-error-color)',
+        boxShadow: cssVariableTheme.action.focusRing,
+      },
+    '&[data-invalid][data-variant="contained"]:focus-within label': {
+      background: 'color-mix(in srgb, var(--input-error-color) 12%, transparent)',
+    },
+
+    // Disabled state
+    '&[data-disabled] label': {
+      color: cssVariableTheme.text.disabled,
+      filter: 'grayscale(100%)',
+      opacity: cssVariableTheme.action.disabledOpacity,
+      cursor: 'not-allowed',
+    },
+    '&[data-disabled]:focus-within label': {
+      boxShadow: 'none',
+    },
+
+    '& .input-row': {
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      gap: cssVariableTheme.spacing.sm,
+    },
+    '& input': {
+      color: 'inherit',
+      border: 'none',
+      backgroundColor: 'transparent',
+      outline: 'none',
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+      fontWeight: cssVariableTheme.typography.fontWeight.normal,
+      width: '100%',
+      textOverflow: 'ellipsis',
+      padding: '0',
+      marginTop: cssVariableTheme.spacing.sm,
+      marginBottom: '2px',
+      flexGrow: '1',
+      lineHeight: '1.5',
+    },
+    '& .helperText': {
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      marginTop: '6px',
+      opacity: '0.85',
+      lineHeight: '1.4',
+    },
+    '& .startIcon, & .endIcon': {
+      display: 'flex',
+      alignItems: 'center',
+      fontSize: cssVariableTheme.typography.fontSize.lg,
+    },
+  },
+  render: ({ props, injector, useState, useDisposable, useHostProps, useRef }) => {
+    const inputRef = useRef<HTMLInputElement>('formInput')
 
-      const endIcon = element.querySelector<HTMLSpanElement>('span.endIcon')
-      if (endIcon) {
-        endIcon.replaceChildren(props.getEndIcon?.({ state: newState, validationResult }) || '')
-        attachStyles(endIcon, {
-          style: {
-            display: 'flex',
-            alignItems: 'center',
-            fontSize: '16px',
-          },
+    useDisposable('form-registration', () => {
+      const formService = injector.cachedSingletons.has(FormService) ? injector.getInstance(FormService) : null
+      if (formService) {
+        queueMicrotask(() => {
+          if (inputRef.current) formService.inputs.add(inputRef.current)
         })
       }
-
-      if (injector.cachedSingletons.has(FormService)) {
-        const formService = injector.getInstance(FormService)
-        formService.setFieldState(props.name as keyof unknown, validationResult || { isValid: true }, newState.validity)
+      return {
+        [Symbol.dispose]: () => {
+          if (inputRef.current && formService) formService.inputs.delete(inputRef.current)
+        },
       }
+    })
+
+    const themeProvider = injector.getInstance(ThemeProviderService)
+
+    const [focused, setFocused] = useState('focused', props.autofocus || false)
+    const [validity, setValidity] = useState('validity', inputRef.current?.validity || emptyValidity)
+
+    // Derive state from props + local state (value is props-driven or read from native input)
+    const state: TextInputState = {
+      value: props.value ?? inputRef.current?.value ?? '',
+      focused,
+      validity,
     }
 
-    const [state, setState] = useObservable<TextInputState>(
-      'inputState',
-      new ObservableValue({
-        value: props.value || '',
-        focused: props.autofocus || false,
-        validity: element.querySelector('input')?.validity || ({} as ValidityState),
-        element,
-      }),
-      { onChange: updateState },
-    )
+    // Enrich validity with toJSON for serialization
+    if (validity && !validity.toJSON) {
+      validity.toJSON = () => ({
+        valid: validity.valid,
+        valueMissing: validity.valueMissing,
+        typeMismatch: validity.typeMismatch,
+        patternMismatch: validity.patternMismatch,
+        tooLong: validity.tooLong,
+        tooShort: validity.tooShort,
+        rangeUnderflow: validity.rangeUnderflow,
+        rangeOverflow: validity.rangeOverflow,
+        stepMismatch: validity.stepMismatch,
+        badInput: validity.badInput,
+      })
+    }
+
+    const validationResult = props.getValidationResult?.({ state })
+    const isInvalid = validationResult?.isValid === false || validity?.valid === false
+
+    const primaryColor = themeProvider.theme.palette[props.defaultColor || 'primary'].main
+    useHostProps({
+      'data-variant': props.variant || undefined,
+      'data-disabled': props.disabled ? '' : undefined,
+      'data-invalid': isInvalid ? '' : undefined,
+      style: {
+        '--input-primary-color': primaryColor,
+        '--input-error-color': themeProvider.theme.palette.error.main,
+      },
+    })
+
+    if (injector.cachedSingletons.has(FormService)) {
+      const formService = injector.getInstance(FormService)
+      formService.setFieldState(props.name as keyof unknown, validationResult || { isValid: true }, validity)
+    }
+
+    const helperNode =
+      (validationResult?.isValid === false && validationResult?.message) ||
+      props.getHelperText?.({ state, validationResult }) ||
+      getDefaultMessagesForValidityState(validity) ||
+      ''
 
     return (
-      <label {...props.labelProps} style={getLabelStyle({ props, state, themeProvider })}>
+      <label {...props.labelProps}>
         {props.labelTitle}
 
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            width: '100%',
-            gap: '8px',
-          }}
-        >
+        <div className="input-row">
           {props.getStartIcon ? (
-            <span className="startIcon" style={{ display: 'flex', alignItems: 'center', fontSize: '16px' }}>
-              {props.getStartIcon?.({ state })}
-            </span>
+            <span className="startIcon">{props.getStartIcon({ state, validationResult })}</span>
           ) : null}
           <input
+            ref={inputRef}
             oninvalid={(ev) => {
               ev.preventDefault()
-              const el = ev.target as HTMLInputElement
-              setState({ ...state, validity: el.validity })
+              setValidity((ev.target as HTMLInputElement).validity)
             }}
             onchange={function (ev) {
               const el = ev.target as HTMLInputElement
-              const newValue = el.value
-              setState({ ...state, value: newValue, validity: el?.validity })
-              props.onTextChange?.(newValue)
+              setValidity(el.validity)
+              props.onTextChange?.(el.value)
               props?.onchange?.call(this, ev)
             }}
             onfocus={(ev) => {
-              const el = ev.target as HTMLInputElement
-              setState({ ...state, focused: true, validity: el.validity })
+              setFocused(true)
+              setValidity((ev.target as HTMLInputElement).validity)
             }}
             onblur={(ev) => {
-              const el = ev.target as HTMLInputElement
-              setState({ ...state, focused: false, validity: el.validity })
+              setFocused(false)
+              setValidity((ev.target as HTMLInputElement).validity)
             }}
             {...props}
-            style={{
-              color: 'inherit',
-              border: 'none',
-              backgroundColor: 'transparent',
-              outline: 'none',
-              fontSize: '13px',
-              fontWeight: '400',
-              width: '100%',
-              textOverflow: 'ellipsis',
-              padding: '0',
-              marginTop: '8px',
-              marginBottom: '2px',
-              flexGrow: '1',
-              lineHeight: '1.5',
-              ...props.style,
-            }}
-            value={state.value}
+            style={props.style}
+            {...(props.value !== undefined ? { value: props.value } : {})}
           />
-          {props.getEndIcon ? (
-            <span className="endIcon" style={{ display: 'flex', alignItems: 'center', fontSize: '16px' }}>
-              {props.getEndIcon({ state })}
-            </span>
-          ) : null}
+          {props.getEndIcon ? <span className="endIcon">{props.getEndIcon({ state, validationResult })}</span> : null}
         </div>
-        <span
-          className="helperText"
-          style={{
-            fontSize: '11px',
-            marginTop: '6px',
-            opacity: '0.85',
-            lineHeight: '1.4',
-          }}
-        >
-          {props.getHelperText?.({ state })}
-        </span>
+        <span className="helperText">{helperNode}</span>
       </label>
     )
   },