@stack-spot/citric-react 0.3.2 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Accordion.tsx

@@ -1,6 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { useEffect, useMemo, useState } from 'react'
-import { HTMLExtension } from '../types'
 import { applyCSSVariable } from '../utils/css'
 import { CitricComponent } from './CitricComponent'
 
@@ -34,7 +33,7 @@ export interface BaseAccordionProps {
   maxHeight?: number,
 }
 
-export type AccordionProps = HTMLExtension<'div', BaseAccordionProps>
+export type AccordionProps = React.JSX.IntrinsicElements['div'] & BaseAccordionProps
 
 export const Accordion = (
   { id, appearance, expanded, onChange, header, maxHeight = 300, className, style, children, ...props }: AccordionProps,

package/src/components/Alert.tsx

@@ -1,5 +1,4 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { HTMLExtension } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseAlertProps {
@@ -10,7 +9,7 @@ export interface BaseAlertProps {
   type?: 'error' | 'info' | 'warning',
 }
 
-export type AlertProps = HTMLExtension<'div', BaseAlertProps>
+export type AlertProps = React.JSX.IntrinsicElements['div'] & BaseAlertProps
 
 export const Alert = ({ type, className, children, ...props }: AlertProps) =>
   <CitricComponent tag="div" component="alert" className={listToClass([type, className])} {...props}>{children}</CitricComponent>

package/src/components/Avatar.tsx

@@ -1,5 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { HTMLExtension, WithColorPalette } from '../types'
+import { WithColorPalette } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseAvatarProps extends WithColorPalette {
@@ -21,7 +21,7 @@ export interface BaseAvatarProps extends WithColorPalette {
   image?: string,
 }
 
-export type AvatarProps = HTMLExtension<'div', BaseAvatarProps>
+export type AvatarProps = React.JSX.IntrinsicElements['div'] & BaseAvatarProps
 
 export const Avatar = ({ size, name, appearance, className, image, ...props }: AvatarProps) => {
   const parts = name?.split(' ') ?? ['']

package/src/components/AvatarGroup.tsx

@@ -1,5 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { HTMLExtension, WithColorPalette } from '../types'
+import { WithColorPalette } from '../types'
 import { Avatar } from './Avatar'
 import { CitricComponent } from './CitricComponent'
 
@@ -22,7 +22,7 @@ export interface BaseAvatarGroupProps extends WithColorPalette {
   maxItems?: number,
 }
 
-export type AvatarGroupProps = HTMLExtension<'div', BaseAvatarGroupProps>
+export type AvatarGroupProps = React.JSX.IntrinsicElements['div'] & BaseAvatarGroupProps
 
 export const AvatarGroup = ({ size, items, appearance, maxItems, className, ...props }: AvatarGroupProps) => {
   const avatars = items.map(({ name, image }) => <Avatar key={name} name={name} image={image} />, [items])

package/src/components/Badge.tsx

@@ -1,5 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { HTMLExtension, WithColorPalette } from '../types'
+import { HTMLTag, WithColorPalette } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 type ValidTags = 'a' | 'button' | 'li' | 'div' | 'span'
@@ -17,7 +17,7 @@ export interface BaseBadgeProps<T extends ValidTags = ValidTags> extends WithCol
   appearance?: 'square' | 'circle',
 }
 
-export type BadgeProps<T extends ValidTags> = HTMLExtension<T, BaseBadgeProps<T>>
+export type BadgeProps<T extends ValidTags> = HTMLTag[T] & BaseBadgeProps<T>
 
 export function Badge<T extends ValidTags>({ tag, appearance, className, children, ...props }: BadgeProps<T>) {
   return (

package/src/components/Blockquote.tsx

@@ -1,9 +1,9 @@
-import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types'
+import { WithColorPalette, WithColorScheme } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 export type BaseBlockquoteProps = WithColorScheme & WithColorPalette
 
-export type BlockquoteProps = HTMLExtension<'blockquote', BaseBlockquoteProps>
+export type BlockquoteProps = React.JSX.IntrinsicElements['blockquote'] & BaseBlockquoteProps
 
 export const Blockquote = ({ children, ...props }: BlockquoteProps) =>
   <CitricComponent tag="blockquote" component="blockquote" {...props}>{children}</CitricComponent>

package/src/components/Breadcrumb.tsx

@@ -1,5 +1,4 @@
 import { useMemo } from 'react'
-import { HTMLExtension } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 interface BreadCrumbItem {
@@ -11,7 +10,7 @@ export interface BaseBreadcrumbProps {
   items: BreadCrumbItem[],
 }
 
-export type BreadcrumbProps = HTMLExtension<'nav', BaseBreadcrumbProps>
+export type BreadcrumbProps = React.JSX.IntrinsicElements['nav'] & BaseBreadcrumbProps
 
 export const Breadcrumb = ({ items, ...props }: BreadcrumbProps) => {
   const children = useMemo(

package/src/components/Button.tsx

@@ -1,7 +1,7 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { useState } from 'react'
 import { useCitricController } from '../context/hooks'
-import { HTMLExtension, WithColorScheme } from '../types'
+import { WithColorScheme } from '../types'
 import { CitricComponent } from './CitricComponent'
 import { ProgressCircular } from './ProgressCircular'
 
@@ -44,7 +44,7 @@ export interface BaseButtonProps extends WithColorScheme {
   analytics?: boolean,
 }
 
-export type ButtonProps = HTMLExtension<'button', BaseButtonProps>
+export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'onClick'> & BaseButtonProps
 
 export const Button = (
   { appearance, size, feedback, loading, disabled, onClick, className, children, type = 'button', analytics, ...props }: ButtonProps,

package/src/components/Card.tsx

@@ -1,5 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { HTMLExtension, WithColorScheme } from '../types'
+import { WithColorScheme } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseCardProps extends WithColorScheme {
@@ -18,7 +18,7 @@ export interface BaseCardProps extends WithColorScheme {
   bgLevel?: 300 | 400 | 500 | 600, 
 }
 
-export type CardProps = HTMLExtension<'div', BaseCardProps>
+export type CardProps = React.JSX.IntrinsicElements['div'] & BaseCardProps
 
 export const Card = ({ onClick, size, bgLevel, className, children, ...props }: CardProps) => (
   <CitricComponent

package/src/components/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { HTMLExtension, WithColorScheme } from '../types'
+import { ControlledInput, WithColorScheme } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseCheckboxProps extends WithColorScheme {
@@ -12,7 +12,7 @@ export interface BaseCheckboxProps extends WithColorScheme {
   children?: React.ReactNode,
 }
 
-export type CheckboxProps = HTMLExtension<'input', BaseCheckboxProps>
+export type CheckboxProps = ControlledInput & BaseCheckboxProps
 
 export const Checkbox = (
   { appearance = 'checkbox', value, onChange, colorScheme, children, className, style, ...props }: CheckboxProps,

package/src/components/CheckboxGroup.tsx

@@ -1,6 +1,6 @@
 import { isNil } from 'lodash'
 import { useMemo } from 'react'
-import { HTMLExtension, WithColorScheme } from '../types'
+import { WithColorScheme } from '../types'
 import { defaultRenderKey, defaultRenderLabel } from '../utils/options'
 import { CitricComponent } from './CitricComponent'
 import { Column } from './layout'
@@ -55,7 +55,7 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
   isDisabled?: (option: T) => boolean,
 }
 
-export type CheckboxGroupProps<T> = HTMLExtension<'div', BaseCheckboxGroupProps<T>>
+export type CheckboxGroupProps<T> = React.JSX.IntrinsicElements['div'] & BaseCheckboxGroupProps<T>
 
 export function CheckboxGroup<T>({
   appearance = 'checkbox',

package/src/components/Circle.tsx

@@ -1,5 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types'
+import { WithColorPalette, WithColorScheme } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseCircleProps extends WithColorPalette, WithColorScheme {
@@ -17,7 +17,7 @@ export interface BaseCircleProps extends WithColorPalette, WithColorScheme {
   size?: 'xxs' | 'xs' | 'sm' | 'lg' | 'xl' | 'xxl',
 }
 
-export type CircleProps = HTMLExtension<'div', BaseCircleProps>
+export type CircleProps = React.JSX.IntrinsicElements['div'] & BaseCircleProps
 
 export const Circle = ({ showBorders, className, size, children, ...props }: CircleProps) => (
   <CitricComponent tag="div" component="circle" className={listToClass([className, showBorders && 'bordered', size])} {...props}>

package/src/components/CitricComponent.ts

@@ -18,7 +18,7 @@ interface CitricComponentType {
   <T extends keyof JSX.IntrinsicElements>(props: Props<T>): React.ReactNode,
 }
 
-export function asCitricProps({ colorScheme, colorPalette, component, ...props }: Omit<Props<any>, 'tag'>) {
+export function asCitricProps({ colorScheme, colorPalette, component, ...props }: Omit<CustomProps<any>, 'tag'> & Record<string, any>) {
   const citricProps: Record<string, any> = { ...props, 'data-citric': component }
   if (colorScheme) citricProps['data-color-scheme'] = colorScheme
   if (colorPalette) citricProps['data-color-palette'] = colorPalette

package/src/components/Divider.tsx

@@ -1,5 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { HTMLExtension, WithColorScheme } from '../types'
+import { WithColorScheme } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseDividerProps extends WithColorScheme {
@@ -13,7 +13,7 @@ export interface BaseDividerProps extends WithColorScheme {
   size?: 'sm' | 'md' | 'lg',
 }
 
-export type DividerProps = HTMLExtension<'hr', BaseDividerProps>
+export type DividerProps = React.JSX.IntrinsicElements['hr'] & BaseDividerProps
 
 export const Divider = ({ size, direction, className, children, ...props }: DividerProps) => (
   <CitricComponent tag="hr" component="divider" className={listToClass([className, size, direction])} {...props}>

package/src/components/Favorite.tsx

@@ -1,5 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { HTMLExtension } from '../types'
+import { ControlledInput } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 type FavoriteAppearance = 'square' | 'circle' | 'text'
@@ -22,7 +22,7 @@ export interface BaseFavoriteProps {
   isLoading?: boolean,
 }
 
-export type FavoriteProps = HTMLExtension<'input', BaseFavoriteProps>
+export type FavoriteProps = ControlledInput & BaseFavoriteProps
 
 export const Favorite = ({ value, size, appearance, onChange, isLoading, className, ...props }: FavoriteProps) =>
   <CitricComponent

package/src/components/FieldGroup.tsx

@@ -1,5 +1,4 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { HTMLExtension } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseFieldGroupProps {
@@ -13,7 +12,7 @@ export interface BaseFieldGroupProps {
   auto?: boolean,
 }
 
-export type FieldGroupProps = HTMLExtension<'div', BaseFieldGroupProps>
+export type FieldGroupProps = React.JSX.IntrinsicElements['div'] & BaseFieldGroupProps
 
 export const FieldGroup = ({ auto = true, className, children, ...props }: FieldGroupProps) => (
   <CitricComponent tag="div" component="field-group" className={listToClass([className, auto && 'auto'])} {...props}>

package/src/components/FormGroup.tsx

@@ -1,5 +1,4 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { HTMLExtension } from '../types'
 import { CitricComponent } from './CitricComponent'
 import { IconButton } from './IconBox'
 import { Text } from './Text'
@@ -24,7 +23,7 @@ export interface BaseFormGroupProps {
   warning?: string,
 }
 
-export type FormGroupProps = HTMLExtension<'div', BaseFormGroupProps>
+export type FormGroupProps = React.JSX.IntrinsicElements['div'] & BaseFormGroupProps
 
 export const FormGroup = ({ error, help, label, warning, className, children, ...props }: FormGroupProps) => (
   <CitricComponent tag="div" component="form-group" className={listToClass([className, error && 'error'])} {...props}>

package/src/components/IconBox.tsx

@@ -2,7 +2,7 @@ import { IconGroup, IconOwnProps } from '@stack-spot/citric-icons'
 import { listToClass } from '@stack-spot/portal-theme'
 import { useCallback } from 'react'
 import { useCitricController } from '../context/hooks'
-import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types'
+import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 type IconBoxTag = 'a' | 'button' | 'i' | 'span' | 'div'
@@ -43,7 +43,7 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
   analytics?: boolean,
 }
 
-export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = HTMLExtension<T, BaseIconBoxProps<T, G>>
+export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = HTMLTag[T] & BaseIconBoxProps<T, G>
 
 export function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>(
   { group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, ...props }: IconBoxProps<T, G>,

package/src/components/Input.tsx

@@ -1,4 +1,4 @@
-import { HTMLExtension, WithColorScheme } from '../types'
+import { ControlledInput, WithColorScheme } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 export type SupportedInputType = 'color' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 
@@ -14,7 +14,7 @@ export interface BaseInputProps<T extends SupportedInputType> extends WithColorS
 }
 
 export type InputProps<T extends SupportedInputType = 'text'> = 
-  HTMLExtension<'input', BaseInputProps<T> & { type?: T }>
+  ControlledInput & BaseInputProps<T> & { type?: T }
 
 export function Input<T extends SupportedInputType = 'text'>({ type, value, onChange, ...props }: InputProps<T>) {
   function handleChange(e: React.ChangeEvent<HTMLInputElement>) {

package/src/components/Link.tsx

@@ -1,5 +1,5 @@
 import { useCitricController } from '../context/hooks'
-import { HTMLExtension, TextAppearance, WithColor } from '../types'
+import { TextAppearance, WithColor } from '../types'
 import { applyColor, applyTextAppearance } from '../utils/css'
 import { asCitricProps, CitricComponent } from './CitricComponent'
 
@@ -20,7 +20,7 @@ export interface BaseLinkProps extends WithColor {
   analytics?: boolean,
 }
 
-export type LinkProps = HTMLExtension<'a', BaseLinkProps>
+export type LinkProps = React.JSX.IntrinsicElements['a'] & BaseLinkProps
 
 export const Link = ({ appearance, color, style, className, children, onClick, analytics, ...props }: LinkProps) => {
   const citric = useCitricController()

package/src/components/MenuOverlay/types.ts

@@ -1,4 +1,3 @@
-import { HTMLExtension } from '../../types'
 import { BaseOverlayProps } from '../Overlay/types'
 
 interface CustomLabel {
@@ -165,7 +164,7 @@ export interface BaseMenuProps {
   menuStyle?: React.CSSProperties,
 }
 
-export type MenuProps = HTMLExtension<'div', BaseMenuProps>
+export type MenuProps = React.JSX.IntrinsicElements['div'] & BaseMenuProps
 
 export interface BaseMenuOverlayProps extends
   BaseMenuProps, Omit<BaseOverlayProps<'div'>, 'tag' | 'onRenderChild' | 'content' | 'triggerOn' | 'reference'> {
@@ -175,4 +174,4 @@ export interface BaseMenuOverlayProps extends
   id?: string,
 }
 
-export type MenuOverlayProps = HTMLExtension<'div', BaseMenuOverlayProps>
+export type MenuOverlayProps = Omit<React.JSX.IntrinsicElements['div'], 'content'> & BaseMenuOverlayProps

package/src/components/Overlay/types.ts

@@ -1,5 +1,5 @@
 import { OverlayOptions } from '../../overlay'
-import { HTMLExtension, HTMLTag } from '../../types'
+import { HTMLTag } from '../../types'
 
 export type TriggerOn = 'hover' | 'click'
 
@@ -63,8 +63,7 @@ export interface BaseOverlayProps<T extends keyof HTMLTag> extends Omit<OverlayO
   onRenderChild?: (element: HTMLElement) => void,
 }
 
-export type OverlayProps<T extends keyof HTMLTag> =
-  HTMLExtension<'div', BaseOverlayProps<T>>
+export type OverlayProps<T extends keyof HTMLTag> = Omit<React.JSX.IntrinsicElements['div'], 'content'> & BaseOverlayProps<T>
 
 export interface OverlayController {
   close: () => Promise<void>,

package/src/components/Pagination.tsx

@@ -1,6 +1,5 @@
 import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
 import { useMemo } from 'react'
-import { HTMLExtension } from '../types'
 import { CitricComponent } from './CitricComponent'
 import { IconButton } from './IconBox'
 
@@ -29,7 +28,7 @@ export interface BasePaginationProps {
   onChange: (page: number, size: number) => void,
 }
 
-export type PaginationProps = HTMLExtension<'div', BasePaginationProps>
+export type PaginationProps = React.JSX.IntrinsicElements['div'] & BasePaginationProps
 
 export const Pagination = (
   { pageSizeOptions = [10, 20, 30], pageSize, totalPages, page, onChange, ...props }: PaginationProps,

package/src/components/ProgressBar.tsx

@@ -1,6 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { isNil } from 'lodash'
-import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types'
+import { WithColorPalette, WithColorScheme } from '../types'
 import { applyCSSVariable } from '../utils/css'
 import { CitricComponent } from './CitricComponent'
 
@@ -13,7 +13,7 @@ export interface BaseProgressBarProps extends WithColorScheme, WithColorPalette
   progress?: number,
 }
 
-export type ProgressBarProps = HTMLExtension<'div', BaseProgressBarProps>
+export type ProgressBarProps = React.JSX.IntrinsicElements['div'] & BaseProgressBarProps
 
 export const ProgressBar = ({ progress, style, className, ...props }: ProgressBarProps) =>
   <CitricComponent

package/src/components/ProgressCircular.tsx

@@ -1,6 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { isNil } from 'lodash'
-import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types'
+import { WithColorPalette, WithColorScheme } from '../types'
 import { applyCSSVariable } from '../utils/css'
 import { CitricComponent } from './CitricComponent'
 
@@ -17,7 +17,7 @@ export interface BaseProgressCircularProps extends WithColorScheme, WithColorPal
   size?: 'xs' | 'sm' | 'md' | 'lg',
 }
 
-export type ProgressCircularProps = HTMLExtension<'div', BaseProgressCircularProps>
+export type ProgressCircularProps = React.JSX.IntrinsicElements['div'] & BaseProgressCircularProps
 
 export const ProgressCircular = ({ progress, size, style, className, ...props }: ProgressCircularProps) =>
   <CitricComponent

package/src/components/RadioGroup.tsx

@@ -1,6 +1,6 @@
 import { isNil } from 'lodash'
 import { useMemo } from 'react'
-import { HTMLExtension, WithColorScheme } from '../types'
+import { WithColorScheme } from '../types'
 import { defaultRenderKey, defaultRenderLabel } from '../utils/options'
 import { CitricComponent } from './CitricComponent'
 import { Column } from './layout'
@@ -50,7 +50,7 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
   isDisabled?: (option: T) => boolean,
 }
 
-export type RadioGroupProps<T> = HTMLExtension<'div', BaseRadioGroupProps<T>>
+export type RadioGroupProps<T> = React.JSX.IntrinsicElements['div'] & BaseRadioGroupProps<T>
 
 export function RadioGroup<T>({
   name,

package/src/components/Rating.tsx

@@ -1,4 +1,3 @@
-import { HTMLExtension } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 export type RatingValue = 1 | 2 | 3 | 4 | 5
@@ -12,7 +11,7 @@ export interface BaseRatingProps {
   name?: string,
 }
 
-export type RatingProps = HTMLExtension<'div', BaseRatingProps>
+export type RatingProps = React.JSX.IntrinsicElements['div'] & BaseRatingProps
 
 export const Rating = ({ value, onChange, name, ...props }: RatingProps) => (
   <CitricComponent tag="div" component="rating" {...props}>

package/src/components/Select/SimpleSelect.tsx

@@ -1,4 +1,3 @@
-import { isNil } from 'lodash'
 import { useCallback, useMemo } from 'react'
 import { defaultRenderKey, defaultRenderLabel } from '../../utils/options'
 import { CitricComponent } from '../CitricComponent'
@@ -20,17 +19,16 @@ export function SimpleSelect<T>({
   ...props
 }: SelectProps<T> & { wrap?: boolean }) {
   const handleChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
-    const selectedIndex = e.target.options.selectedIndex + (required ? 0 : 1)
-    onChange?.(options[selectedIndex])
+    const selectedIndex = e.target.options.selectedIndex - (e.target.options.length > options.length ? 1 : 0)
+    onChange?.(selectedIndex >= 0 ? options[selectedIndex] : undefined)
   }, [options])
 
   const renderedOptions = useMemo(() => {
-    const valueKey = value ? renderKey(value) : undefined
     const items = (!value || !required) ? [<option key="">{renderLabel(undefined)}</option>] : []
     options.forEach((o) => {
       const key = renderKey(o)
       items.push(
-        <option key={key} value={key} selected={o === value || (!isNil(key) && key === valueKey)}>
+        <option key={key} value={key}>
           {renderLabel(o)}
         </option>,
       )
@@ -47,12 +45,20 @@ export function SimpleSelect<T>({
       component="select"
       onFocus={onFocus}
       onBlur={onBlur}
+      value={value ? renderKey(value) : ''}
     >
       {renderedOptions}
     </CitricComponent>
   ) : (
     <CitricComponent tag="div" component="select" aria-busy={loading} {...props}>
-      <select required={required} onChange={handleChange} disabled={disabled || loading} onFocus={onFocus} onBlur={onBlur}>
+      <select
+        value={value ? renderKey(value) : undefined}
+        required={required}
+        onChange={handleChange}
+        disabled={disabled || loading}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      >
         {renderedOptions}
       </select>
       {loading && <ProgressCircular className="loader" size="xs" />}

package/src/components/Select/types.ts

@@ -1,4 +1,4 @@
-import { HTMLExtension, WithColorScheme } from '../../types'
+import { WithColorScheme } from '../../types'
 
 interface CommonSelectProps<T> extends WithColorScheme {
   /**
@@ -118,4 +118,4 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
 
 export type BaseSelectProps<T> = SimpleSelectProps<T> | RichSelectProps<T>
 
-export type SelectProps<T> = HTMLExtension<'div', BaseSelectProps<T>>
+export type SelectProps<T> = React.JSX.IntrinsicElements['div'] & BaseSelectProps<T>

package/src/components/SelectBox.tsx

@@ -1,6 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { useMemo } from 'react'
-import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types'
+import { WithColorPalette, WithColorScheme } from '../types'
 import { defaultRenderKey, defaultRenderLabel } from '../utils/options'
 import { CitricComponent } from './CitricComponent'
 import { layout } from './layout'
@@ -70,7 +70,7 @@ interface RadioProps<T> extends CommonSelectBoxProps<T> {
 
 export type BaseSelectBoxProps<T> = RadioProps<T> | CheckboxProps<T>
 
-export type SelectBoxProps<T> = HTMLExtension<'div', BaseSelectBoxProps<T>>
+export type SelectBoxProps<T> = React.JSX.IntrinsicElements['div'] & BaseSelectBoxProps<T>
 
 export function SelectBox<T>({
   multiple,

package/src/components/Skeleton.tsx

@@ -1,5 +1,4 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { HTMLExtension } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseSkeletonProps {
@@ -29,7 +28,7 @@ export interface BaseSkeletonProps {
   bgLevel?: 400 | 500 | 600, 
 }
 
-export type SkeletonProps = HTMLExtension<'div', BaseSkeletonProps>
+export type SkeletonProps = React.JSX.IntrinsicElements['div'] & BaseSkeletonProps
 
 export const Skeleton = ({ appearance, className, style, width, height, bgLevel, ...props }: SkeletonProps) =>
   <CitricComponent

package/src/components/Slider.tsx

@@ -1,5 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types'
+import { ControlledInput, WithColorPalette, WithColorScheme } from '../types'
 import { applyCSSVariable } from '../utils/css'
 import { CitricComponent } from './CitricComponent'
 
@@ -32,7 +32,7 @@ export interface BaseSliderProps extends WithColorScheme, WithColorPalette {
   renderValue?: (value: number) => string,
 }
 
-export type SliderProps =  HTMLExtension<'input', BaseSliderProps>
+export type SliderProps =  ControlledInput & BaseSliderProps
 
 export const Slider = (
   { value, onChange, min, max, style, showValue, renderValue, colorPalette, colorScheme, className, ...props }: SliderProps,

package/src/components/Stepper.tsx

@@ -1,7 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { HTMLExtension } from '../types'
 import { Button } from './Button'
 import { Column, Row } from './layout'
 import { Tabs } from './Tabs'
@@ -57,7 +56,7 @@ export interface BaseStepperProps<Key extends string> extends BaseTabsProps<Key>
   },
 }
 
-export type StepperProps<Key extends string> = HTMLExtension<'div', BaseStepperProps<Key>>
+export type StepperProps<Key extends string> = React.JSX.IntrinsicElements['div'] & BaseStepperProps<Key>
 
 function getTabsWithDisabled<Key extends string>(tabs: Tab<Key>[], value: Key | undefined) {
   let index = findSelectedIndex(tabs, value ?? '')

package/src/components/Switch.tsx

@@ -1,4 +1,4 @@
-import { HTMLExtension, WithColorScheme } from '../types'
+import { ControlledInput, WithColorScheme } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 interface Props extends WithColorScheme {
@@ -7,7 +7,7 @@ interface Props extends WithColorScheme {
   children?: React.ReactNode,
 }
 
-export type SwitchProps = HTMLExtension<'input', Props>
+export type SwitchProps = ControlledInput & Props
 
 export const Switch = ({ value, onChange, children, className, style, ...props }: SwitchProps) => {
   const handleChange = onChange ? () => onChange(!value) : undefined

package/src/components/Table.tsx

@@ -1,7 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect, useRef } from 'react'
-import { HTMLExtension } from '../types'
 import { applyCSSVariable } from '../utils/css'
 import { CitricComponent } from './CitricComponent'
 
@@ -106,9 +105,9 @@ interface BaseTrProps {
   accordionMaxHeight?: string,
 }
 
-export type TableProps = HTMLExtension<'table', BaseTableProps>
-export type ThProps = HTMLExtension<'th', BaseThProps>
-export type TrProps = HTMLExtension<'tr', BaseTrProps>
+export type TableProps = React.JSX.IntrinsicElements['table'] & BaseTableProps
+export type ThProps = React.JSX.IntrinsicElements['th'] & BaseThProps
+export type TrProps = React.JSX.IntrinsicElements['tr'] & BaseTrProps
 
 export const Table = ({
   appearance, stripped, compressed, showBorders, showHeaderBorders, showRowBorders, rounded, roundedRows, uppercaseHeader, className,