@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/inputs/input.tsx

@@ -1,11 +1,12 @@
 import type { PartialElement } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import { ObservableValue } from '@furystack/utils'
 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 }
@@ -72,27 +73,6 @@ export type TextInputState = {
   value: string
   focused: boolean
   validity: ValidityState
-  element: JSX.Element<TextInputProps>
-}
-
-/**
- * Sets CSS custom properties for dynamic color values.
- * State-based styling (focus, error, disabled) is handled by CSS selectors.
- * Background colors use CSS color-mix() for automatic theme adaptation.
- */
-const setInputColors = ({
-  element,
-  themeProvider,
-  props,
-}: {
-  element: HTMLElement
-  themeProvider: ThemeProviderService
-  props: TextInputProps
-}): void => {
-  // Only set the color variables - backgrounds use CSS color-mix()
-  const primaryColor = themeProvider.theme.palette[props.defaultColor || 'primary'].main
-  element.style.setProperty('--input-primary-color', primaryColor)
-  element.style.setProperty('--input-error-color', themeProvider.theme.palette.error.main)
 }
 
 const getDefaultMessagesForValidityState = (state: ValidityState) => {
@@ -139,12 +119,12 @@ export const Input = Shade<TextInputProps>({
       flexDirection: 'column',
       alignItems: 'flex-start',
       justifyContent: 'space-between',
-      fontSize: '11px',
-      fontWeight: '500',
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      fontWeight: cssVariableTheme.typography.fontWeight.medium,
       letterSpacing: '0.01em',
       padding: '12px 14px',
-      borderRadius: '8px',
-      transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+      borderRadius: cssVariableTheme.shape.borderRadius.md,
+      transition: `all ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.default}`,
       cursor: 'text',
       color: cssVariableTheme.text.secondary,
       background: 'transparent',
@@ -154,12 +134,12 @@ export const Input = Shade<TextInputProps>({
 
     // Outlined variant - default border
     '&[data-variant="outlined"] label': {
-      borderColor: 'rgba(128, 128, 128, 0.3)',
+      borderColor: cssVariableTheme.action.subtleBorder,
     },
 
     // Contained variant - background using color-mix for theme-aware alpha
     '&[data-variant="contained"] label': {
-      borderColor: 'rgba(128, 128, 128, 0.3)',
+      borderColor: cssVariableTheme.action.subtleBorder,
       background: 'color-mix(in srgb, var(--input-primary-color) 8%, transparent)',
     },
 
@@ -171,7 +151,7 @@ export const Input = Shade<TextInputProps>({
     // 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: '0 0 0 3px rgba(128, 128, 128, 0.15)',
+      boxShadow: cssVariableTheme.action.focusRing,
     },
     '&[data-variant="contained"]:focus-within label': {
       background: 'color-mix(in srgb, var(--input-primary-color) 12%, transparent)',
@@ -193,7 +173,7 @@ export const Input = Shade<TextInputProps>({
     '&[data-invalid][data-variant="outlined"]:focus-within label, &[data-invalid][data-variant="contained"]:focus-within label':
       {
         borderColor: 'var(--input-error-color)',
-        boxShadow: '0 0 0 3px rgba(128, 128, 128, 0.15)',
+        boxShadow: cssVariableTheme.action.focusRing,
       },
     '&[data-invalid][data-variant="contained"]:focus-within label': {
       background: 'color-mix(in srgb, var(--input-error-color) 12%, transparent)',
@@ -203,7 +183,7 @@ export const Input = Shade<TextInputProps>({
     '&[data-disabled] label': {
       color: cssVariableTheme.text.disabled,
       filter: 'grayscale(100%)',
-      opacity: '0.5',
+      opacity: cssVariableTheme.action.disabledOpacity,
       cursor: 'not-allowed',
     },
     '&[data-disabled]:focus-within label': {
@@ -214,25 +194,25 @@ export const Input = Shade<TextInputProps>({
       display: 'flex',
       alignItems: 'center',
       width: '100%',
-      gap: '8px',
+      gap: cssVariableTheme.spacing.sm,
     },
     '& input': {
       color: 'inherit',
       border: 'none',
       backgroundColor: 'transparent',
       outline: 'none',
-      fontSize: '13px',
-      fontWeight: '400',
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+      fontWeight: cssVariableTheme.typography.fontWeight.normal,
       width: '100%',
       textOverflow: 'ellipsis',
       padding: '0',
-      marginTop: '8px',
+      marginTop: cssVariableTheme.spacing.sm,
       marginBottom: '2px',
       flexGrow: '1',
       lineHeight: '1.5',
     },
     '& .helperText': {
-      fontSize: '11px',
+      fontSize: cssVariableTheme.typography.fontSize.xs,
       marginTop: '6px',
       opacity: '0.85',
       lineHeight: '1.4',
@@ -240,135 +220,114 @@ export const Input = Shade<TextInputProps>({
     '& .startIcon, & .endIcon': {
       display: 'flex',
       alignItems: 'center',
-      fontSize: '16px',
+      fontSize: cssVariableTheme.typography.fontSize.lg,
     },
   },
-  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)
-
-    // Set data attributes for CSS styling
-    if (props.variant) {
-      element.setAttribute('data-variant', props.variant)
-    } else {
-      element.removeAttribute('data-variant')
-    }
-    if (props.disabled) {
-      element.setAttribute('data-disabled', '')
-    } else {
-      element.removeAttribute('data-disabled')
-    }
-
-    // Set dynamic color CSS variables (only needs to happen once per render)
-    setInputColors({ element, themeProvider, props })
-
-    const updateState = (newState: TextInputState) => {
-      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,
-        }
+  render: ({ props, injector, useState, useDisposable, useHostProps, useRef }) => {
+    const inputRef = useRef<HTMLInputElement>('formInput')
+
+    useDisposable('form-registration', () => {
+      const formService = injector.cachedSingletons.has(FormService) ? injector.getInstance(FormService) : null
+      if (formService) {
+        queueMicrotask(() => {
+          if (inputRef.current) formService.inputs.add(inputRef.current)
+        })
+      }
+      return {
+        [Symbol.dispose]: () => {
+          if (inputRef.current && formService) formService.inputs.delete(inputRef.current)
+        },
       }
+    })
 
-      const validationResult = props.getValidationResult?.({ state: newState })
+    const themeProvider = injector.getInstance(ThemeProviderService)
 
-      // Set data-invalid attribute for CSS styling
-      if (validationResult?.isValid === false || newState.validity?.valid === false) {
-        element.setAttribute('data-invalid', '')
-      } else {
-        element.removeAttribute('data-invalid')
-      }
+    const [focused, setFocused] = useState('focused', props.autofocus || false)
+    const [validity, setValidity] = useState('validity', inputRef.current?.validity || emptyValidity)
 
-      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)
-      }
+    // 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 startIcon = element.querySelector<HTMLSpanElement>('span.startIcon')
-      if (startIcon) {
-        startIcon.replaceChildren(props.getStartIcon?.({ state: newState, validationResult }) || '')
-      }
+    // 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 endIcon = element.querySelector<HTMLSpanElement>('span.endIcon')
-      if (endIcon) {
-        endIcon.replaceChildren(props.getEndIcon?.({ state: newState, validationResult }) || '')
-      }
+    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 }, newState.validity)
-      }
+    if (injector.cachedSingletons.has(FormService)) {
+      const formService = injector.getInstance(FormService)
+      formService.setFieldState(props.name as keyof unknown, validationResult || { isValid: true }, 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 },
-    )
+    const helperNode =
+      (validationResult?.isValid === false && validationResult?.message) ||
+      props.getHelperText?.({ state, validationResult }) ||
+      getDefaultMessagesForValidityState(validity) ||
+      ''
 
     return (
       <label {...props.labelProps}>
         {props.labelTitle}
 
         <div className="input-row">
-          {props.getStartIcon ? <span className="startIcon">{props.getStartIcon?.({ state })}</span> : null}
+          {props.getStartIcon ? (
+            <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={props.style}
-            value={state.value}
+            {...(props.value !== undefined ? { value: props.value } : {})}
           />
-          {props.getEndIcon ? <span className="endIcon">{props.getEndIcon({ state })}</span> : null}
+          {props.getEndIcon ? <span className="endIcon">{props.getEndIcon({ state, validationResult })}</span> : null}
         </div>
-        <span className="helperText">{props.getHelperText?.({ state })}</span>
+        <span className="helperText">{helperNode}</span>
       </label>
     )
   },

package/src/components/inputs/radio-group.spec.tsx

@@ -0,0 +1,281 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { RadioGroup } from './radio-group.js'
+import { Radio } from './radio.js'
+
+describe('RadioGroup', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    vi.restoreAllMocks()
+  })
+
+  it('should render with shadow DOM', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <RadioGroup name="test-group">
+            <Radio value="option1" labelTitle="Option 1" />
+            <Radio value="option2" labelTitle="Option 2" />
+          </RadioGroup>
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const group = document.querySelector('shade-radio-group')
+      expect(group).not.toBeNull()
+    })
+  })
+
+  it('should set the radiogroup role', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <RadioGroup name="test-group">
+            <Radio value="option1" />
+          </RadioGroup>
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const group = document.querySelector('shade-radio-group') as HTMLElement
+      expect(group.getAttribute('role')).toBe('radiogroup')
+    })
+  })
+
+  it('should render the label title', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <RadioGroup name="test-group" labelTitle="Pick an option">
+            <Radio value="option1" />
+          </RadioGroup>
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const label = document.querySelector('shade-radio-group .radio-group-label') as HTMLElement
+      expect(label).not.toBeNull()
+      expect(label.textContent).toBe('Pick an option')
+    })
+  })
+
+  it('should not render label span when labelTitle is not provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <RadioGroup name="test-group">
+            <Radio value="option1" />
+          </RadioGroup>
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const label = document.querySelector('shade-radio-group .radio-group-label')
+      expect(label).toBeNull()
+    })
+  })
+
+  describe('orientation', () => {
+    it('should default to vertical orientation', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <RadioGroup name="test-group">
+              <Radio value="option1" />
+            </RadioGroup>
+          ),
+        })
+
+        await sleepAsync(50)
+
+        const group = document.querySelector('shade-radio-group') as HTMLElement
+        expect(group.getAttribute('data-orientation')).toBe('vertical')
+      })
+    })
+
+    it('should set horizontal orientation', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <RadioGroup name="test-group" orientation="horizontal">
+              <Radio value="option1" />
+            </RadioGroup>
+          ),
+        })
+
+        await sleepAsync(50)
+
+        const group = document.querySelector('shade-radio-group') as HTMLElement
+        expect(group.getAttribute('data-orientation')).toBe('horizontal')
+      })
+    })
+  })
+
+  describe('name propagation', () => {
+    it('should set the name attribute on child radio inputs', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <RadioGroup name="fruit-group">
+              <Radio value="apple" labelTitle="Apple" />
+              <Radio value="banana" labelTitle="Banana" />
+            </RadioGroup>
+          ),
+        })
+
+        await sleepAsync(100)
+
+        const inputs = document.querySelectorAll('shade-radio input[type="radio"]')
+        inputs.forEach((input) => {
+          expect((input as HTMLInputElement).name).toBe('fruit-group')
+        })
+      })
+    })
+  })
+
+  describe('value selection', () => {
+    it('should set the correct radio as checked based on value prop', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <RadioGroup name="test-group" value="option2">
+              <Radio value="option1" labelTitle="Option 1" />
+              <Radio value="option2" labelTitle="Option 2" />
+              <Radio value="option3" labelTitle="Option 3" />
+            </RadioGroup>
+          ),
+        })
+
+        await sleepAsync(100)
+
+        const inputs = document.querySelectorAll('shade-radio input[type="radio"]')
+        expect((inputs[0] as HTMLInputElement).checked).toBe(false)
+        expect((inputs[1] as HTMLInputElement).checked).toBe(true)
+        expect((inputs[2] as HTMLInputElement).checked).toBe(false)
+      })
+    })
+
+    it('should set the correct radio as checked based on defaultValue prop', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <RadioGroup name="test-group" defaultValue="option3">
+              <Radio value="option1" labelTitle="Option 1" />
+              <Radio value="option2" labelTitle="Option 2" />
+              <Radio value="option3" labelTitle="Option 3" />
+            </RadioGroup>
+          ),
+        })
+
+        await sleepAsync(100)
+
+        const inputs = document.querySelectorAll('shade-radio input[type="radio"]')
+        expect((inputs[0] as HTMLInputElement).checked).toBe(false)
+        expect((inputs[1] as HTMLInputElement).checked).toBe(false)
+        expect((inputs[2] as HTMLInputElement).checked).toBe(true)
+      })
+    })
+  })
+
+  describe('disabled state', () => {
+    it('should disable all radio inputs when group is disabled', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <RadioGroup name="test-group" disabled>
+              <Radio value="option1" labelTitle="Option 1" />
+              <Radio value="option2" labelTitle="Option 2" />
+            </RadioGroup>
+          ),
+        })
+
+        await sleepAsync(100)
+
+        const inputs = document.querySelectorAll('shade-radio input[type="radio"]')
+        inputs.forEach((input) => {
+          expect((input as HTMLInputElement).disabled).toBe(true)
+        })
+      })
+    })
+  })
+
+  describe('onchange callback', () => {
+    it('should call onchange when a radio is selected', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <RadioGroup name="test-group" onValueChange={onchange}>
+              <Radio value="option1" labelTitle="Option 1" />
+              <Radio value="option2" labelTitle="Option 2" />
+            </RadioGroup>
+          ),
+        })
+
+        await sleepAsync(100)
+
+        const input = document.querySelectorAll('shade-radio input[type="radio"]')[1] as HTMLInputElement
+        input.checked = true
+        input.dispatchEvent(new Event('change', { bubbles: true }))
+
+        await sleepAsync(50)
+
+        expect(onchange).toHaveBeenCalledWith('option2')
+      })
+    })
+  })
+})