@furystack/shades-common-components 15.0.3 → 15.1.0

package/src/components/inputs/input.tsx

@@ -3,6 +3,7 @@ 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 type { ComponentSize } from '../component-size.js'
 import { FormService } from '../form.js'
 
 const emptyValidity = {} as ValidityState
@@ -13,7 +14,7 @@ export type InvalidInputValidationResult = { isValid: false; message: string }
 
 export type InputValidationResult = ValidInputValidationResult | InvalidInputValidationResult
 
-export interface TextInputProps extends PartialElement<HTMLInputElement> {
+export interface TextInputProps extends Omit<PartialElement<HTMLInputElement>, 'size'> {
   /**
    * Callback that will be called when the input value changes
    */
@@ -36,6 +37,12 @@ export interface TextInputProps extends PartialElement<HTMLInputElement> {
    * The variant of the input
    */
   variant?: 'contained' | 'outlined'
+  /**
+   * The size of the input.
+   * @default 'medium'
+   */
+  size?: ComponentSize
+
   /**
    * The default color of the input (Error color will be used in case of invalid input value)
    */
@@ -223,8 +230,32 @@ export const Input = Shade<TextInputProps>({
       alignItems: 'center',
       fontSize: cssVariableTheme.typography.fontSize.lg,
     },
+
+    // Size: small
+    '&[data-size="small"] label': {
+      padding: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.sm}`,
+    },
+    '&[data-size="small"] input': {
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+    },
+    '&[data-size="small"] .startIcon, &[data-size="small"] .endIcon': {
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
+
+    // Size: large
+    '&[data-size="large"] label': {
+      padding: `${cssVariableTheme.spacing.md} ${cssVariableTheme.spacing.lg}`,
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+    },
+    '&[data-size="large"] input': {
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
+    '&[data-size="large"] .startIcon, &[data-size="large"] .endIcon': {
+      fontSize: cssVariableTheme.typography.fontSize.xl,
+    },
   },
   render: ({ props, injector, useState, useDisposable, useHostProps, useRef }) => {
+    const { size: componentSize, ...nativeProps } = props
     const inputRef = useRef<HTMLInputElement>('formInput')
 
     useDisposable('form-registration', () => {
@@ -277,6 +308,7 @@ export const Input = Shade<TextInputProps>({
     const primaryColor = themeProvider.theme.palette[props.defaultColor || 'primary'].main
     useHostProps({
       'data-variant': props.variant || undefined,
+      'data-size': componentSize && componentSize !== 'medium' ? componentSize : undefined,
       'data-disabled': props.disabled ? '' : undefined,
       'data-invalid': isInvalid ? '' : undefined,
       style: {
@@ -324,7 +356,7 @@ export const Input = Shade<TextInputProps>({
               setFocused(false)
               setValidity((ev.target as HTMLInputElement).validity)
             }}
-            {...props}
+            {...nativeProps}
             style={props.style}
             {...(props.value !== undefined ? { value: props.value } : {})}
           />

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

@@ -270,4 +270,46 @@ describe('Radio', () => {
       })
     })
   })
+
+  describe('size', () => {
+    it('should not set data-size when size is not specified', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Radio value="opt1" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-radio') as HTMLElement
+        expect(el.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should not set data-size for medium size (default)', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Radio value="opt1" size="medium" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-radio') as HTMLElement
+        expect(el.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should set data-size="small" for small size', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Radio value="opt1" size="small" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-radio') as HTMLElement
+        expect(el.getAttribute('data-size')).toBe('small')
+      })
+    })
+
+    it('should set data-size="large" for large size', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Radio value="opt1" size="large" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-radio') as HTMLElement
+        expect(el.getAttribute('data-size')).toBe('large')
+      })
+    })
+  })
 })

package/src/components/inputs/radio.tsx

@@ -3,6 +3,7 @@ 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 type { ComponentSize } from '../component-size.js'
 import { FormService } from '../form.js'
 
 export type RadioProps = {
@@ -34,6 +35,11 @@ export type RadioProps = {
    * Whether the radio button is checked
    */
   checked?: boolean
+  /**
+   * The size of the radio button.
+   * @default 'medium'
+   */
+  size?: ComponentSize
   /**
    * Optional props for the label element
    */
@@ -116,6 +122,44 @@ export const Radio = Shade<RadioProps>({
       opacity: cssVariableTheme.action.disabledOpacity,
       cursor: 'not-allowed',
     },
+
+    // Size: small
+    '&[data-size="small"] label': {
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+    },
+    '&[data-size="small"] .radio-control': {
+      width: '16px',
+      height: '16px',
+    },
+    '&[data-size="small"] input[type="radio"]': {
+      width: '16px',
+      height: '16px',
+    },
+    '&[data-size="small"] input[type="radio"]:checked::after': {
+      left: '4px',
+      top: '4px',
+      width: '8px',
+      height: '8px',
+    },
+
+    // Size: large
+    '&[data-size="large"] label': {
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
+    '&[data-size="large"] .radio-control': {
+      width: '24px',
+      height: '24px',
+    },
+    '&[data-size="large"] input[type="radio"]': {
+      width: '24px',
+      height: '24px',
+    },
+    '&[data-size="large"] input[type="radio"]:checked::after': {
+      left: '6px',
+      top: '6px',
+      width: '12px',
+      height: '12px',
+    },
   },
   render: ({ props, injector, useDisposable, useHostProps, useRef }) => {
     const inputRef = useRef<HTMLInputElement>('formInput')
@@ -177,6 +221,7 @@ export const Radio = Shade<RadioProps>({
 
     const color = themeProvider.theme.palette[props.color || 'primary'].main
     useHostProps({
+      'data-size': props.size && props.size !== 'medium' ? props.size : undefined,
       'data-disabled': isDisabled ? '' : undefined,
       style: { '--radio-color': color },
     })

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

@@ -1231,4 +1231,30 @@ describe('Select', () => {
       })
     })
   })
+
+  describe('size', () => {
+    it('should not set data-size when size is not specified', async () => {
+      await usingAsync(await renderSelect({ options: defaultOptions }), async ({ select }) => {
+        expect(select.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should not set data-size for medium size (default)', async () => {
+      await usingAsync(await renderSelect({ options: defaultOptions, size: 'medium' }), async ({ select }) => {
+        expect(select.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should set data-size="small" for small size', async () => {
+      await usingAsync(await renderSelect({ options: defaultOptions, size: 'small' }), async ({ select }) => {
+        expect(select.getAttribute('data-size')).toBe('small')
+      })
+    })
+
+    it('should set data-size="large" for large size', async () => {
+      await usingAsync(await renderSelect({ options: defaultOptions, size: 'large' }), async ({ select }) => {
+        expect(select.getAttribute('data-size')).toBe('large')
+      })
+    })
+  })
 })

package/src/components/inputs/select.tsx

@@ -3,6 +3,7 @@ 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 type { ComponentSize } from '../component-size.js'
 import { FormService } from '../form.js'
 import { check, close } from '../icons/icon-definitions.js'
 import { Icon } from '../icons/icon.js'
@@ -47,6 +48,11 @@ export type SelectProps = {
   labelProps?: PartialElement<HTMLLabelElement>
   /** The visual variant of the select */
   variant?: 'contained' | 'outlined'
+  /**
+   * The size of the select.
+   * @default 'medium'
+   */
+  size?: ComponentSize
   /** The default color of the select */
   defaultColor?: keyof Palette
   /** The name attribute for form integration */
@@ -340,6 +346,31 @@ export const Select = Shade<SelectProps>({
       opacity: '0.85',
       lineHeight: '1.4',
     },
+
+    // Size: small
+    '&[data-size="small"] label': {
+      padding: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.sm}`,
+    },
+    '&[data-size="small"] .select-value': {
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+    },
+    '&[data-size="small"] .dropdown-item': {
+      padding: `6px ${cssVariableTheme.spacing.sm}`,
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+    },
+
+    // Size: large
+    '&[data-size="large"] label': {
+      padding: `${cssVariableTheme.spacing.md} ${cssVariableTheme.spacing.lg}`,
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+    },
+    '&[data-size="large"] .select-value': {
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
+    '&[data-size="large"] .dropdown-item': {
+      padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.lg}`,
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
   },
   render: ({ props, injector, useState, useDisposable, useHostProps, useRef }) => {
     const selectRootRef = useRef<HTMLDivElement>('selectRoot')
@@ -394,6 +425,7 @@ export const Select = Shade<SelectProps>({
     const primaryColor = themeProvider.theme.palette[props.defaultColor || 'primary'].main
     useHostProps({
       'data-variant': props.variant || undefined,
+      'data-size': props.size && props.size !== 'medium' ? props.size : undefined,
       'data-disabled': props.disabled ? '' : undefined,
       'data-multiple': isMultiple ? '' : undefined,
       'data-open': state.isOpen && !props.disabled ? '' : undefined,

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

@@ -407,4 +407,46 @@ describe('Switch', () => {
       })
     })
   })
+
+  describe('size', () => {
+    it('should not set data-size when size is not specified', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Switch /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-switch') as HTMLElement
+        expect(el.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should not set data-size for medium size (default)', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Switch size="medium" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-switch') as HTMLElement
+        expect(el.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should set data-size="small" for small size', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Switch size="small" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-switch') as HTMLElement
+        expect(el.getAttribute('data-size')).toBe('small')
+      })
+    })
+
+    it('should set data-size="large" for large size', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <Switch size="large" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-switch') as HTMLElement
+        expect(el.getAttribute('data-size')).toBe('large')
+      })
+    })
+  })
 })

package/src/components/inputs/switch.tsx

@@ -3,6 +3,7 @@ import { Shade, createComponent } from '@furystack/shades'
 import { buildTransition, 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 type { ComponentSize } from '../component-size.js'
 import { FormService } from '../form.js'
 
 export type SwitchProps = {
@@ -41,7 +42,7 @@ export type SwitchProps = {
   /**
    * The size of the switch
    */
-  size?: 'small' | 'medium'
+  size?: ComponentSize
   /**
    * Optional props for the label element
    */
@@ -116,6 +117,18 @@ export const Switch = Shade<SwitchProps>({
       height: '14px',
     },
 
+    // Large size
+    '&[data-size="large"] .switch-track': {
+      width: '48px',
+      height: '26px',
+      borderRadius: '13px',
+    },
+
+    '&[data-size="large"] .switch-thumb': {
+      width: '22px',
+      height: '22px',
+    },
+
     // Hidden input
     '& input[type="checkbox"]': {
       position: 'absolute',
@@ -143,6 +156,10 @@ export const Switch = Shade<SwitchProps>({
       transform: 'translateX(14px)',
     },
 
+    '&[data-size="large"] input[type="checkbox"]:checked + .switch-track .switch-thumb': {
+      transform: 'translateX(22px)',
+    },
+
     // Hover state
     '& .switch-control:hover .switch-track': {
       opacity: '0.7',
@@ -191,7 +208,7 @@ export const Switch = Shade<SwitchProps>({
     const color = themeProvider.theme.palette[props.color || 'primary'].main
     useHostProps({
       'data-disabled': props.disabled ? '' : undefined,
-      'data-size': props.size === 'small' ? 'small' : undefined,
+      'data-size': props.size && props.size !== 'medium' ? props.size : undefined,
       style: { '--switch-color': color },
     })
 

package/src/components/inputs/text-area.spec.tsx

@@ -297,4 +297,46 @@ describe('TextArea', () => {
       expect(computedStyle.marginBottom).toBe('1em')
     })
   })
+
+  describe('size', () => {
+    it('should not set data-size when size is not specified', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <TextArea /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-text-area') as HTMLElement
+        expect(el.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should not set data-size for medium size (default)', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <TextArea size="medium" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-text-area') as HTMLElement
+        expect(el.getAttribute('data-size')).toBeNull()
+      })
+    })
+
+    it('should set data-size="small" for small size', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <TextArea size="small" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-text-area') as HTMLElement
+        expect(el.getAttribute('data-size')).toBe('small')
+      })
+    })
+
+    it('should set data-size="large" for large size', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        initializeShadeRoot({ injector, rootElement, jsxElement: <TextArea size="large" /> })
+        await flushUpdates()
+        const el = document.querySelector('shade-text-area') as HTMLElement
+        expect(el.getAttribute('data-size')).toBe('large')
+      })
+    })
+  })
 })

package/src/components/inputs/text-area.tsx

@@ -1,12 +1,18 @@
 import type { PartialElement } from '@furystack/shades'
 import { createComponent, Shade } from '@furystack/shades'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
+import type { ComponentSize } from '../component-size.js'
 
 export interface TextAreaProps extends PartialElement<HTMLTextAreaElement> {
   labelTitle?: string
   labelProps?: PartialElement<HTMLLabelElement>
   autofocus?: boolean
   variant?: 'contained' | 'outlined'
+  /**
+   * The size of the text area.
+   * @default 'medium'
+   */
+  size?: ComponentSize
 }
 
 export const TextArea = Shade<TextAreaProps>({
@@ -49,10 +55,29 @@ export const TextArea = Shade<TextAreaProps>({
     '&:focus-within .textarea-content': {
       boxShadow: `0px 3px 0px ${cssVariableTheme.palette.primary.main}`,
     },
+
+    // Size: small
+    '&[data-size="small"] label': {
+      padding: cssVariableTheme.spacing.sm,
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+    },
+    '&[data-size="small"] .textarea-content': {
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+    },
+
+    // Size: large
+    '&[data-size="large"] label': {
+      padding: cssVariableTheme.spacing.lg,
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+    },
+    '&[data-size="large"] .textarea-content': {
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
   },
   render: ({ props, useHostProps }) => {
     useHostProps({
       'data-variant': props.variant || undefined,
+      'data-size': props.size && props.size !== 'medium' ? props.size : undefined,
       'data-disabled': props.disabled ? '' : undefined,
     })
 

package/src/components/pagination.tsx

@@ -3,6 +3,7 @@ import { Shade, createComponent } from '@furystack/shades'
 import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
 import { paletteMainColors } from '../services/palette-css-vars.js'
 import type { Palette } from '../services/theme-provider-service.js'
+import type { ComponentSize } from './component-size.js'
 
 export type PaginationProps = PartialElement<HTMLElement> & {
   /** Total number of pages */
@@ -18,7 +19,7 @@ export type PaginationProps = PartialElement<HTMLElement> & {
   /** If true, the pagination is disabled */
   disabled?: boolean
   /** Size variant */
-  size?: 'small' | 'medium' | 'large'
+  size?: ComponentSize
   /** Palette color */
   color?: keyof Palette
 }

package/src/components/rating.tsx

@@ -2,6 +2,7 @@ import { Shade, createComponent } from '@furystack/shades'
 import { buildTransition, 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 type { ComponentSize } from './component-size.js'
 import { Icon } from './icons/icon.js'
 import { star as starIcon, starOutline } from './icons/icon-definitions.js'
 
@@ -24,7 +25,7 @@ export type RatingProps = {
   /**
    * Size of the rating stars
    */
-  size?: 'small' | 'medium' | 'large'
+  size?: ComponentSize
   /**
    * Whether the rating is disabled
    */