@stack-spot/citric-react 0.3.1 → 0.3.3

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) })

package/src/types.ts

@@ -51,7 +51,8 @@ export type HTMLTag = {
   ul: React.HTMLAttributes<HTMLUListElement>,
 }
 
-export type HTMLExtension<K extends keyof HTMLTag, Props> = Omit<HTMLTag[K], keyof Props> & Props
+export type ControlledInput = Omit<React.JSX.IntrinsicElements['input'], 'value' | 'onChange'>
+export type ControlledTextarea = Omit<React.JSX.IntrinsicElements['textarea'], 'value' | 'onChange'>
 
 export interface WithStyleShortcuts {
   /**