@stack-spot/citric-react 0.3.2 → 0.4.0

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'
@@ -22,9 +22,21 @@ export interface BaseTextProps<T extends SupportedTags = SupportedTags> extends
    * @default false
    */
   showMargins?: boolean,
+  /**
+   * Shortcut to `style.fontWeight`.
+   */
+  weight?: React.CSSProperties['fontWeight'],
+  /**
+   * Shortcut to `style.textAlign`.
+   */
+  align?: React.CSSProperties['textAlign'],
+  /**
+   * Shortcut to `style.whiteSpace = 'nowrap'; style.overflow = 'hidden'; style.textOverflow = 'ellipsis'`.
+   */
+  nowrapEllipsis?: 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',
@@ -60,10 +72,15 @@ const appearanceToTag: Record<TextAppearance, SupportedTags> = {
   subtitle4: 'p',
 }
 
-export function Text<T extends SupportedTags>({ tag, appearance, color, showMargins, style, className, children, ...props }: TextProps<T>) {
+export function Text<T extends SupportedTags>(
+  { tag, appearance, color, showMargins, weight, align, nowrapEllipsis, style, className, children, ...props }: TextProps<T>,
+) {
   const renderedTag = tag || appearanceToTag[appearance || 'body2']
   const renderedAppearance = appearance || (tag ? tagToAppearance[tag] : undefined)
-  if (!appearance && !showMargins) style = { ...style, margin: 0 }
+  if (!appearance && !showMargins) style = { margin: 0, ...style }
+  if (weight) style = { fontWeight: weight, ...style }
+  if (align) style = { textAlign: align, ...style }
+  if (nowrapEllipsis) style = { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', ...style }
   return createElement(
     renderedTag,
     {

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 {
   /**