@furystack/shades-common-components 11.0.0 → 12.0.1

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

@@ -0,0 +1,108 @@
+import type { ChildrenList } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
+import type { Palette } from '../../services/theme-provider-service.js'
+
+export type RadioGroupProps = {
+  /**
+   * The name attribute shared by all radio buttons in the group
+   */
+  name: string
+  /**
+   * The currently selected value
+   */
+  value?: string
+  /**
+   * The default selected value (used for uncontrolled mode)
+   */
+  defaultValue?: string
+  /**
+   * Whether all radio buttons in the group are disabled
+   */
+  disabled?: boolean
+  /**
+   * Callback when the selected value changes
+   */
+  onValueChange?: (value: string) => void
+  /**
+   * The palette color applied to all radio buttons in the group
+   */
+  color?: keyof Palette
+  /**
+   * Label text or element displayed above the group
+   */
+  labelTitle?: JSX.Element | string
+  /**
+   * Layout direction of the radio buttons
+   */
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export const RadioGroup: (props: RadioGroupProps, children: ChildrenList) => JSX.Element = Shade<RadioGroupProps>({
+  shadowDomName: 'shade-radio-group',
+  css: {
+    display: 'block',
+
+    '& .radio-group-label': {
+      display: 'block',
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      fontWeight: cssVariableTheme.typography.fontWeight.medium,
+      color: cssVariableTheme.text.secondary,
+      marginBottom: cssVariableTheme.spacing.sm,
+    },
+
+    '& .radio-group-items': {
+      display: 'flex',
+      gap: cssVariableTheme.spacing.sm,
+    },
+
+    '&[data-orientation="vertical"] .radio-group-items': {
+      flexDirection: 'column',
+    },
+
+    '&[data-orientation="horizontal"] .radio-group-items': {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+    },
+  },
+  render: ({ props, children, useDisposable, useHostProps, useRef }) => {
+    const wrapperRef = useRef<HTMLDivElement>('wrapper')
+
+    useDisposable('change-handler', () => {
+      const handleChange = (ev: Event) => {
+        const target = ev.target as HTMLInputElement
+        if (target.type === 'radio' && target.checked) {
+          props.onValueChange?.(target.value)
+        }
+      }
+
+      let el: HTMLElement | null = null
+      queueMicrotask(() => {
+        el = wrapperRef.current
+        el?.addEventListener('change', handleChange)
+      })
+
+      return { [Symbol.dispose]: () => el?.removeEventListener('change', handleChange) }
+    })
+
+    const orientation = props.orientation || 'vertical'
+
+    // Expose group-level props as data attributes so child Radio components
+    // can read them synchronously during their own render cycle.
+    useHostProps({
+      'data-orientation': orientation,
+      role: 'radiogroup',
+      'data-group-name': props.name,
+      'data-disabled': props.disabled ? '' : undefined,
+      'data-group-value': props.value !== undefined ? props.value : undefined,
+      'data-group-default-value': props.defaultValue !== undefined ? props.defaultValue : undefined,
+    })
+
+    return (
+      <div ref={wrapperRef} style={{ display: 'contents' }}>
+        {props.labelTitle ? <span className="radio-group-label">{props.labelTitle}</span> : null}
+        <div className="radio-group-items">{children}</div>
+      </div>
+    )
+  },
+})

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

@@ -0,0 +1,273 @@
+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 { ThemeProviderService } from '../../services/theme-provider-service.js'
+import { Form, FormService } from '../form.js'
+import { Radio } from './radio.js'
+
+describe('Radio', () => {
+  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: <Radio value="option1" />,
+      })
+
+      await sleepAsync(50)
+
+      const radio = document.querySelector('shade-radio')
+      expect(radio).not.toBeNull()
+    })
+  })
+
+  it('should render the inner radio input element', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Radio value="option1" name="test-group" />,
+      })
+
+      await sleepAsync(50)
+
+      const input = document.querySelector('shade-radio input[type="radio"]') as HTMLInputElement
+      expect(input).not.toBeNull()
+      expect(input.value).toBe('option1')
+      expect(input.name).toBe('test-group')
+    })
+  })
+
+  it('should render the label title', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Radio value="option1" labelTitle="Option 1" />,
+      })
+
+      await sleepAsync(50)
+
+      const label = document.querySelector('shade-radio label') as HTMLLabelElement
+      expect(label).not.toBeNull()
+      expect(label.textContent).toContain('Option 1')
+    })
+  })
+
+  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: <Radio value="option1" />,
+      })
+
+      await sleepAsync(50)
+
+      const labelSpan = document.querySelector('shade-radio .radio-label')
+      expect(labelSpan).toBeNull()
+    })
+  })
+
+  describe('checked state', () => {
+    it('should render as checked when checked prop is true', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Radio value="option1" checked />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-radio input[type="radio"]') as HTMLInputElement
+        expect(input.checked).toBe(true)
+      })
+    })
+
+    it('should render as unchecked when checked prop is false', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Radio value="option1" checked={false} />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-radio input[type="radio"]') as HTMLInputElement
+        expect(input.checked).toBe(false)
+      })
+    })
+  })
+
+  describe('disabled state', () => {
+    it('should set data-disabled attribute when disabled', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Radio value="option1" disabled />,
+        })
+
+        await sleepAsync(50)
+
+        const radio = document.querySelector('shade-radio') as HTMLElement
+        expect(radio.hasAttribute('data-disabled')).toBe(true)
+
+        const input = radio.querySelector('input[type="radio"]') as HTMLInputElement
+        expect(input.disabled).toBe(true)
+      })
+    })
+
+    it('should not have data-disabled attribute when not disabled', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Radio value="option1" disabled={false} />,
+        })
+
+        await sleepAsync(50)
+
+        const radio = document.querySelector('shade-radio') as HTMLElement
+        expect(radio.hasAttribute('data-disabled')).toBe(false)
+      })
+    })
+  })
+
+  describe('theme integration', () => {
+    it('should set CSS color variable from theme', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Radio value="option1" />,
+        })
+
+        await sleepAsync(50)
+
+        const radio = document.querySelector('shade-radio') as HTMLElement
+        const themeService = injector.getInstance(ThemeProviderService)
+        expect(radio.style.getPropertyValue('--radio-color')).toBe(themeService.theme.palette.primary.main)
+      })
+    })
+
+    it('should use custom color from color prop', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Radio value="option1" color="secondary" />,
+        })
+
+        await sleepAsync(50)
+
+        const radio = document.querySelector('shade-radio') as HTMLElement
+        const themeService = injector.getInstance(ThemeProviderService)
+        expect(radio.style.getPropertyValue('--radio-color')).toBe(themeService.theme.palette.secondary.main)
+      })
+    })
+  })
+
+  describe('callbacks', () => {
+    it('should call onchange when radio is clicked', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Radio value="option1" name="test" onchange={onchange} />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-radio input[type="radio"]') as HTMLInputElement
+        input.dispatchEvent(new Event('change', { bubbles: true }))
+
+        await sleepAsync(50)
+
+        expect(onchange).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('FormService integration', () => {
+    it('should register input with FormService when inside a Form', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        type TestFormData = { choice: string }
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Form<TestFormData> onSubmit={() => {}} validate={(_data): _data is TestFormData => true}>
+              <Radio value="option1" name="choice" labelTitle="Option 1" />
+            </Form>
+          ),
+        })
+
+        await sleepAsync(50)
+
+        const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+        const formInjector = (form as unknown as { injector: Injector }).injector
+        const formService = formInjector.getInstance(FormService)
+
+        expect(formService.inputs.size).toBe(1)
+      })
+    })
+  })
+
+  describe('labelProps', () => {
+    it('should pass labelProps to the label element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Radio value="option1" labelProps={{ className: 'custom-label' }} />,
+        })
+
+        await sleepAsync(50)
+
+        const label = document.querySelector('shade-radio label') as HTMLLabelElement
+        expect(label.className).toContain('custom-label')
+      })
+    })
+  })
+})

package/src/components/inputs/radio.tsx

@@ -0,0 +1,199 @@
+import type { PartialElement } from '@furystack/shades'
+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'
+
+export type RadioProps = {
+  /**
+   * The value attribute for the underlying input element
+   */
+  value: string
+  /**
+   * Whether the radio button is disabled
+   */
+  disabled?: boolean
+  /**
+   * The palette color for the radio button
+   */
+  color?: keyof Palette
+  /**
+   * Callback when the radio button is selected
+   */
+  onchange?: (event: Event) => void
+  /**
+   * Label text or element displayed next to the radio button
+   */
+  labelTitle?: JSX.Element | string
+  /**
+   * The name attribute for the underlying input element (set automatically by RadioGroup)
+   */
+  name?: string
+  /**
+   * Whether the radio button is checked
+   */
+  checked?: boolean
+  /**
+   * Optional props for the label element
+   */
+  labelProps?: PartialElement<HTMLLabelElement>
+}
+
+export const Radio = Shade<RadioProps>({
+  shadowDomName: 'shade-radio',
+  css: {
+    display: 'inline-flex',
+    alignItems: 'center',
+
+    '& label': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: cssVariableTheme.spacing.sm,
+      cursor: 'pointer',
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+      color: cssVariableTheme.text.primary,
+      userSelect: 'none',
+      webkitUserSelect: 'none',
+    },
+
+    '& .radio-control': {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '20px',
+      height: '20px',
+      flexShrink: '0',
+    },
+
+    '& input[type="radio"]': {
+      appearance: 'none',
+      webkitAppearance: 'none',
+      width: '20px',
+      height: '20px',
+      margin: '0',
+      border: `2px solid ${cssVariableTheme.text.secondary}`,
+      borderRadius: cssVariableTheme.shape.borderRadius.full,
+      backgroundColor: 'transparent',
+      cursor: 'pointer',
+      transition: `all ${cssVariableTheme.transitions.duration.fast} ${cssVariableTheme.transitions.easing.default}`,
+      outline: 'none',
+    },
+
+    '& input[type="radio"]:hover:not(:disabled)': {
+      borderColor: 'var(--radio-color)',
+    },
+
+    '& input[type="radio"]:focus-visible': {
+      boxShadow: cssVariableTheme.action.focusRing,
+    },
+
+    '& input[type="radio"]:checked': {
+      borderColor: 'var(--radio-color)',
+    },
+
+    '& input[type="radio"]:checked::after': {
+      content: '""',
+      position: 'absolute',
+      left: '5px',
+      top: '5px',
+      width: '10px',
+      height: '10px',
+      borderRadius: cssVariableTheme.shape.borderRadius.full,
+      backgroundColor: 'var(--radio-color)',
+      pointerEvents: 'none',
+    },
+
+    '&[data-disabled] label': {
+      color: cssVariableTheme.text.disabled,
+      cursor: 'not-allowed',
+    },
+
+    '&[data-disabled] input[type="radio"]': {
+      opacity: cssVariableTheme.action.disabledOpacity,
+      cursor: 'not-allowed',
+    },
+  },
+  render: ({ props, injector, useDisposable, useHostProps, useRef }) => {
+    const inputRef = useRef<HTMLInputElement>('formInput')
+
+    useDisposable('form-registration', () => {
+      const formService = injector.cachedSingletons.has(FormService) ? injector.getInstance(FormService) : null
+
+      queueMicrotask(() => {
+        if (inputRef.current && formService) {
+          formService.inputs.add(inputRef.current)
+        }
+
+        // Read group-level overrides from parent RadioGroup
+        const group = inputRef.current?.closest('shade-radio-group')
+        if (group && inputRef.current) {
+          const groupName = group.getAttribute('data-group-name')
+          if (groupName) inputRef.current.name = groupName
+
+          const groupDisabled = group.hasAttribute('data-disabled')
+          if (groupDisabled) inputRef.current.disabled = true
+
+          const groupValue = group.getAttribute('data-group-value')
+          if (groupValue !== null) {
+            inputRef.current.checked = props.value === groupValue
+          } else {
+            const groupDefaultValue = group.getAttribute('data-group-default-value')
+            if (groupDefaultValue !== null && props.checked === undefined) {
+              inputRef.current.checked = props.value === groupDefaultValue
+            }
+          }
+        }
+      })
+
+      return {
+        [Symbol.dispose]: () => {
+          if (inputRef.current && formService) formService.inputs.delete(inputRef.current)
+        },
+      }
+    })
+
+    const themeProvider = injector.getInstance(ThemeProviderService)
+
+    // Read group-level overrides from parent RadioGroup (inputRef is set after first mount)
+    const group = inputRef.current ? inputRef.current.closest('shade-radio-group') : null
+    const groupName = group?.getAttribute('data-group-name')
+    const groupDisabled = group?.hasAttribute('data-disabled') ?? false
+    const groupValue = group?.getAttribute('data-group-value')
+    const groupDefaultValue = group?.getAttribute('data-group-default-value')
+
+    const effectiveName = groupName ?? props.name
+    const isDisabled = props.disabled || groupDisabled
+
+    let isChecked = props.checked
+    if (groupValue !== undefined && groupValue !== null) {
+      isChecked = props.value === groupValue
+    } else if (groupDefaultValue !== undefined && groupDefaultValue !== null && isChecked === undefined) {
+      isChecked = props.value === groupDefaultValue
+    }
+
+    const color = themeProvider.theme.palette[props.color || 'primary'].main
+    useHostProps({
+      'data-disabled': isDisabled ? '' : undefined,
+      style: { '--radio-color': color },
+    })
+
+    return (
+      <label {...props.labelProps}>
+        <span className="radio-control">
+          <input
+            ref={inputRef}
+            type="radio"
+            value={props.value}
+            checked={isChecked}
+            disabled={isDisabled}
+            name={effectiveName}
+            onchange={props.onchange}
+          />
+        </span>
+        {props.labelTitle ? <span className="radio-label">{props.labelTitle}</span> : null}
+      </label>
+    )
+  },
+})