@stack-spot/citric-react 0.3.2 → 0.3.3

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/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,

package/src/components/Tabs/types.ts

@@ -1,4 +1,4 @@
-import { HTMLExtension, WithColorPalette, WithColorScheme } from '../../types'
+import { WithColorPalette, WithColorScheme } from '../../types'
 import { TabController } from './TabController'
 
 export interface Tab<Key extends string> {
@@ -45,4 +45,4 @@ export interface BaseTabsProps<Key extends string> extends WithColorScheme, With
   controller?: TabController<Key>,
 }
 
-export type TabsProps<Key extends string> = HTMLExtension<'div', BaseTabsProps<Key>>
+export type TabsProps<Key extends string> = React.JSX.IntrinsicElements['div'] & BaseTabsProps<Key>

package/src/components/Text.ts

@@ -1,6 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { createElement } from 'react'
-import { HTMLExtension, TextAppearance, WithColor } from '../types'
+import { HTMLTag, TextAppearance, WithColor } from '../types'
 import { applyColor, applyTextAppearance } from '../utils/css'
 
 type SupportedTags = 'span' | 'small' | 'p' | `h${1|2|3|4|5|6}` | 'pre'
@@ -24,7 +24,7 @@ export interface BaseTextProps<T extends SupportedTags = SupportedTags> extends
   showMargins?: boolean,
 }
 
-export type TextProps<T extends SupportedTags> = HTMLExtension<T, BaseTextProps<T>>
+export type TextProps<T extends SupportedTags> = HTMLTag[T] & BaseTextProps<T>
 
 const tagToAppearance: Record<SupportedTags, TextAppearance | undefined> = {
   h1: 'h1',

package/src/components/Textarea.tsx

@@ -1,4 +1,4 @@
-import { HTMLExtension, WithColorScheme } from '../types'
+import { ControlledTextarea, WithColorScheme } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseTextareaProps extends WithColorScheme {
@@ -6,7 +6,7 @@ export interface BaseTextareaProps extends WithColorScheme {
   onChange?: (value: string) => void,
 }
 
-export type TextareaProps = HTMLExtension<'textarea', BaseTextareaProps>
+export type TextareaProps = ControlledTextarea & BaseTextareaProps
 
 export const Textarea = ({ value, onChange, ...props }: TextareaProps) =>
   <CitricComponent tag="textarea" component="textarea" value={value} onChange={e => onChange?.(e.target.value)} {...props} />

package/src/components/Tooltip.tsx

@@ -1,6 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { useRef } from 'react'
-import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types'
+import { WithColorPalette, WithColorScheme } from '../types'
 import { Overlay } from './Overlay'
 import { BaseOverlayProps } from './Overlay/types'
 
@@ -32,7 +32,7 @@ export interface BaseTooltipProps extends
   disabled?: boolean,
 }
 
-export type TooltipProps = HTMLExtension<'div', BaseTooltipProps>
+export type TooltipProps = React.JSX.IntrinsicElements['div'] & BaseTooltipProps
 
 export const Tooltip = (
   { tooltipId, children, showArrow = true, compact = true, attributes, colorScheme, colorPalette, disabled, ...props }: TooltipProps,

package/src/components/layout.tsx

@@ -1,6 +1,6 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { createElement } from 'react'
-import { HTMLExtension, HTMLTag, WithStyleShortcuts } from '../types'
+import { HTMLTag, WithStyleShortcuts } from '../types'
 import { applyStyles } from '../utils/css'
 
 export const layout = {
@@ -36,9 +36,9 @@ export interface BaseColumnProps<T extends keyof HTMLTag> extends BaseLayoutProp
   center?: boolean,
 }
 
-export type CenterProps<T extends keyof HTMLTag> = HTMLExtension<T, BaseLayoutProps<T>>
-export type RowProps<T extends keyof HTMLTag> = HTMLExtension<T, BaseRowProps<T>>
-export type ColumnProps<T extends keyof HTMLTag> = HTMLExtension<T, BaseColumnProps<T>>
+export type CenterProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseLayoutProps<T>
+export type RowProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseRowProps<T>
+export type ColumnProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseColumnProps<T>
 
 export function Center<T extends keyof HTMLTag = 'div'>({ tag, className, ...props }: CenterProps<T>) {
   return createElement(tag || 'div', { className: listToClass(['center', className]), ...applyStyles(props) })