website refactor
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
import React, { forwardRef, ForwardedRef, ElementType, ComponentPropsWithoutRef } from 'react';
|
||||
import React, { forwardRef, ForwardedRef, ElementType } from 'react';
|
||||
|
||||
/**
|
||||
* WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
|
||||
*
|
||||
* Box is a basic container primitive for spacing, sizing and basic styling.
|
||||
* Box is a basic container primitive for spacing, sizing and basic layout.
|
||||
*
|
||||
* - DO NOT add layout props (flex, grid, gap) - use Stack or Grid instead.
|
||||
* - DO NOT add decoration props (bg, border, shadow) - use Surface instead.
|
||||
* - DO NOT add positioning props (absolute, top, zIndex) - create a specific component.
|
||||
* - DO NOT add animation props - create a specific component.
|
||||
*
|
||||
@@ -34,8 +34,23 @@ export type ResponsiveValue<T> = {
|
||||
export interface BoxProps<T extends ElementType> {
|
||||
as?: T;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
// Spacing
|
||||
margin?: Spacing | ResponsiveSpacing;
|
||||
marginTop?: Spacing | ResponsiveSpacing;
|
||||
marginBottom?: Spacing | ResponsiveSpacing;
|
||||
marginLeft?: Spacing | 'auto' | ResponsiveSpacing;
|
||||
marginRight?: Spacing | 'auto' | ResponsiveSpacing;
|
||||
marginX?: Spacing | 'auto' | ResponsiveSpacing;
|
||||
marginY?: Spacing | ResponsiveSpacing;
|
||||
padding?: Spacing | ResponsiveSpacing;
|
||||
paddingTop?: Spacing | ResponsiveSpacing;
|
||||
paddingBottom?: Spacing | ResponsiveSpacing;
|
||||
paddingLeft?: Spacing | ResponsiveSpacing;
|
||||
paddingRight?: Spacing | ResponsiveSpacing;
|
||||
paddingX?: Spacing | ResponsiveSpacing;
|
||||
paddingY?: Spacing | ResponsiveSpacing;
|
||||
|
||||
// Aliases (Deprecated - use full names)
|
||||
m?: Spacing | ResponsiveSpacing;
|
||||
mt?: Spacing | ResponsiveSpacing;
|
||||
mb?: Spacing | ResponsiveSpacing;
|
||||
@@ -50,11 +65,10 @@ export interface BoxProps<T extends ElementType> {
|
||||
pr?: Spacing | ResponsiveSpacing;
|
||||
px?: Spacing | ResponsiveSpacing;
|
||||
py?: Spacing | ResponsiveSpacing;
|
||||
|
||||
// Sizing
|
||||
w?: string | number | ResponsiveValue<string | number>;
|
||||
h?: string | number | ResponsiveValue<string | number>;
|
||||
width?: string | number;
|
||||
height?: string | number;
|
||||
width?: string | number | ResponsiveValue<string | number>;
|
||||
height?: string | number | ResponsiveValue<string | number>;
|
||||
maxWidth?: string | ResponsiveValue<string>;
|
||||
minWidth?: string | ResponsiveValue<string>;
|
||||
maxHeight?: string | ResponsiveValue<string>;
|
||||
@@ -62,6 +76,11 @@ export interface BoxProps<T extends ElementType> {
|
||||
fullWidth?: boolean;
|
||||
fullHeight?: boolean;
|
||||
aspectRatio?: string;
|
||||
|
||||
// Aliases
|
||||
w?: string | number | ResponsiveValue<string | number>;
|
||||
h?: string | number | ResponsiveValue<string | number>;
|
||||
|
||||
// Display
|
||||
display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none' | string | ResponsiveValue<'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none' | string>;
|
||||
center?: boolean;
|
||||
@@ -80,28 +99,6 @@ export interface BoxProps<T extends ElementType> {
|
||||
insetY?: string | number;
|
||||
insetX?: string | number;
|
||||
zIndex?: number;
|
||||
// Basic Styling
|
||||
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string | boolean;
|
||||
border?: boolean | string;
|
||||
borderTop?: boolean | string;
|
||||
borderBottom?: boolean | string;
|
||||
borderLeft?: boolean | string;
|
||||
borderRight?: boolean | string;
|
||||
borderWidth?: string | number;
|
||||
borderStyle?: 'solid' | 'dashed' | 'dotted' | 'none' | string;
|
||||
borderColor?: string;
|
||||
borderOpacity?: number;
|
||||
bg?: string;
|
||||
backgroundColor?: string;
|
||||
backgroundImage?: string;
|
||||
backgroundSize?: string;
|
||||
backgroundPosition?: string;
|
||||
bgOpacity?: number;
|
||||
color?: string;
|
||||
shadow?: string;
|
||||
opacity?: number;
|
||||
blur?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | string;
|
||||
pointerEvents?: 'auto' | 'none' | string;
|
||||
// Flex/Grid Item props
|
||||
flex?: number | string;
|
||||
flexShrink?: number;
|
||||
@@ -113,20 +110,41 @@ export interface BoxProps<T extends ElementType> {
|
||||
alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline';
|
||||
gap?: number | string | ResponsiveValue<number | string>;
|
||||
gridCols?: number | ResponsiveValue<number>;
|
||||
responsiveGridCols?: number | ResponsiveValue<number>;
|
||||
colSpan?: number | ResponsiveValue<number>;
|
||||
responsiveColSpan?: number | ResponsiveValue<number>;
|
||||
order?: number | string | ResponsiveValue<number | string>;
|
||||
// Transform
|
||||
transform?: string | boolean;
|
||||
translate?: string;
|
||||
translateX?: string;
|
||||
translateY?: string;
|
||||
// Animation (Framer Motion support)
|
||||
initial?: any;
|
||||
animate?: any;
|
||||
exit?: any;
|
||||
// Interaction
|
||||
onClick?: React.MouseEventHandler<any>;
|
||||
onMouseEnter?: React.MouseEventHandler<any>;
|
||||
onMouseLeave?: React.MouseEventHandler<any>;
|
||||
id?: string;
|
||||
role?: React.AriaRole;
|
||||
tabIndex?: number;
|
||||
// Internal use only
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
borderTop?: string | boolean;
|
||||
borderBottom?: string | boolean;
|
||||
borderLeft?: string | boolean;
|
||||
borderRight?: string | boolean;
|
||||
bg?: string;
|
||||
rounded?: string | boolean;
|
||||
borderColor?: string;
|
||||
border?: string | boolean;
|
||||
color?: string;
|
||||
opacity?: number;
|
||||
transition?: any;
|
||||
hoverBg?: string;
|
||||
group?: boolean;
|
||||
groupHoverOpacity?: number;
|
||||
groupHoverBorderColor?: string;
|
||||
groupHoverWidth?: string;
|
||||
animate?: any;
|
||||
blur?: string;
|
||||
pointerEvents?: string;
|
||||
bgOpacity?: number;
|
||||
borderWidth?: string | number;
|
||||
borderStyle?: string;
|
||||
initial?: any;
|
||||
variants?: any;
|
||||
whileHover?: any;
|
||||
whileTap?: any;
|
||||
@@ -135,39 +153,14 @@ export interface BoxProps<T extends ElementType> {
|
||||
whileInView?: any;
|
||||
viewport?: any;
|
||||
custom?: any;
|
||||
// Interaction
|
||||
group?: boolean;
|
||||
groupHoverTextColor?: string;
|
||||
groupHoverScale?: boolean;
|
||||
groupHoverOpacity?: number;
|
||||
groupHoverBorderColor?: string;
|
||||
hoverBorderColor?: string;
|
||||
hoverBg?: string;
|
||||
hoverTextColor?: string;
|
||||
hoverScale?: boolean | number;
|
||||
clickable?: boolean;
|
||||
// Events
|
||||
onMouseEnter?: React.MouseEventHandler<any>;
|
||||
onMouseLeave?: React.MouseEventHandler<any>;
|
||||
onClick?: React.MouseEventHandler<any>;
|
||||
onMouseDown?: React.MouseEventHandler<any>;
|
||||
onMouseUp?: React.MouseEventHandler<any>;
|
||||
onMouseMove?: React.MouseEventHandler<any>;
|
||||
onKeyDown?: React.KeyboardEventHandler<any>;
|
||||
onBlur?: React.FocusEventHandler<any>;
|
||||
onSubmit?: React.FormEventHandler<any>;
|
||||
onScroll?: React.UIEventHandler<any>;
|
||||
style?: React.CSSProperties;
|
||||
id?: string;
|
||||
role?: React.AriaRole;
|
||||
tabIndex?: number;
|
||||
// Other
|
||||
type?: 'button' | 'submit' | 'reset' | string;
|
||||
disabled?: boolean;
|
||||
exit?: any;
|
||||
translateX?: string;
|
||||
translateY?: string;
|
||||
translate?: string;
|
||||
cursor?: string;
|
||||
fontSize?: string | ResponsiveValue<string>;
|
||||
weight?: string;
|
||||
fontWeight?: string | number;
|
||||
weight?: string | number;
|
||||
letterSpacing?: string;
|
||||
lineHeight?: string | number;
|
||||
font?: string;
|
||||
@@ -176,19 +169,15 @@ export interface BoxProps<T extends ElementType> {
|
||||
truncate?: boolean;
|
||||
src?: string;
|
||||
alt?: string;
|
||||
draggable?: boolean;
|
||||
draggable?: boolean | string;
|
||||
min?: string | number;
|
||||
max?: string | number;
|
||||
step?: string | number;
|
||||
value?: string | number;
|
||||
onChange?: React.ChangeEventHandler<any>;
|
||||
onError?: React.ReactEventHandler<any>;
|
||||
placeholder?: string;
|
||||
title?: string;
|
||||
padding?: Spacing | ResponsiveSpacing;
|
||||
paddingLeft?: Spacing | ResponsiveSpacing;
|
||||
paddingRight?: Spacing | ResponsiveSpacing;
|
||||
paddingTop?: Spacing | ResponsiveSpacing;
|
||||
paddingBottom?: Spacing | ResponsiveSpacing;
|
||||
size?: string | number | ResponsiveValue<string | number>;
|
||||
accept?: string;
|
||||
autoPlay?: boolean;
|
||||
@@ -196,16 +185,46 @@ export interface BoxProps<T extends ElementType> {
|
||||
muted?: boolean;
|
||||
playsInline?: boolean;
|
||||
objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
|
||||
type?: string;
|
||||
checked?: boolean;
|
||||
disabled?: boolean;
|
||||
onSubmit?: React.FormEventHandler<any>;
|
||||
onBlur?: React.FocusEventHandler<any>;
|
||||
onKeyDown?: React.KeyboardEventHandler<any>;
|
||||
onMouseDown?: React.MouseEventHandler<any>;
|
||||
onMouseUp?: React.MouseEventHandler<any>;
|
||||
onMouseMove?: React.MouseEventHandler<any>;
|
||||
onScroll?: React.UIEventHandler<any>;
|
||||
responsiveColSpan?: number | ResponsiveValue<number>;
|
||||
responsiveGridCols?: number | ResponsiveValue<number>;
|
||||
clickable?: boolean;
|
||||
hoverScale?: boolean | number;
|
||||
hoverBorderColor?: string;
|
||||
hoverTextColor?: string;
|
||||
groupHoverScale?: boolean;
|
||||
groupHoverTextColor?: string;
|
||||
shadow?: string;
|
||||
transform?: boolean | string;
|
||||
lineClamp?: number;
|
||||
fill?: string | boolean;
|
||||
viewBox?: string;
|
||||
stroke?: string;
|
||||
strokeWidth?: string | number;
|
||||
backgroundSize?: string;
|
||||
backgroundPosition?: string;
|
||||
backgroundImage?: string;
|
||||
}
|
||||
|
||||
export const Box = forwardRef(<T extends ElementType = 'div'>(
|
||||
{
|
||||
as,
|
||||
children,
|
||||
className = '',
|
||||
margin, marginTop, marginBottom, marginLeft, marginRight, marginX, marginY,
|
||||
padding, paddingTop, paddingBottom, paddingLeft, paddingRight, paddingX, paddingY,
|
||||
m, mt, mb, ml, mr, mx, my,
|
||||
p, pt, pb, pl, pr, px, py,
|
||||
w, h, width, height,
|
||||
width, height,
|
||||
w, h,
|
||||
maxWidth, minWidth, maxHeight, minHeight,
|
||||
fullWidth, fullHeight,
|
||||
aspectRatio,
|
||||
@@ -218,27 +237,6 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
|
||||
top, right, bottom, left,
|
||||
inset, insetY, insetX,
|
||||
zIndex,
|
||||
rounded,
|
||||
border,
|
||||
borderTop,
|
||||
borderBottom,
|
||||
borderLeft,
|
||||
borderRight,
|
||||
borderWidth,
|
||||
borderStyle,
|
||||
borderColor,
|
||||
borderOpacity,
|
||||
bg,
|
||||
backgroundColor,
|
||||
backgroundImage,
|
||||
backgroundSize,
|
||||
backgroundPosition,
|
||||
bgOpacity,
|
||||
color,
|
||||
shadow,
|
||||
opacity,
|
||||
blur,
|
||||
pointerEvents,
|
||||
flex,
|
||||
flexShrink,
|
||||
flexGrow,
|
||||
@@ -249,18 +247,39 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
|
||||
alignSelf,
|
||||
gap,
|
||||
gridCols,
|
||||
responsiveGridCols,
|
||||
colSpan,
|
||||
responsiveColSpan,
|
||||
order,
|
||||
transform,
|
||||
translate,
|
||||
translateX,
|
||||
translateY,
|
||||
initial,
|
||||
animate,
|
||||
exit,
|
||||
onClick,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
id,
|
||||
role,
|
||||
tabIndex,
|
||||
style: styleProp,
|
||||
className,
|
||||
borderTop,
|
||||
borderBottom,
|
||||
borderLeft,
|
||||
borderRight,
|
||||
bg,
|
||||
rounded,
|
||||
borderColor,
|
||||
border,
|
||||
color,
|
||||
opacity,
|
||||
transition,
|
||||
hoverBg,
|
||||
group,
|
||||
groupHoverOpacity,
|
||||
groupHoverBorderColor,
|
||||
groupHoverWidth,
|
||||
animate,
|
||||
blur,
|
||||
pointerEvents,
|
||||
bgOpacity,
|
||||
borderWidth,
|
||||
borderStyle,
|
||||
initial,
|
||||
variants,
|
||||
whileHover,
|
||||
whileTap,
|
||||
@@ -269,36 +288,14 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
|
||||
whileInView,
|
||||
viewport,
|
||||
custom,
|
||||
group,
|
||||
groupHoverTextColor,
|
||||
groupHoverScale,
|
||||
groupHoverOpacity,
|
||||
groupHoverBorderColor,
|
||||
hoverBorderColor,
|
||||
hoverBg,
|
||||
hoverTextColor,
|
||||
hoverScale,
|
||||
clickable,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
onClick,
|
||||
onMouseDown,
|
||||
onMouseUp,
|
||||
onMouseMove,
|
||||
onKeyDown,
|
||||
onBlur,
|
||||
onSubmit,
|
||||
onScroll,
|
||||
style: styleProp,
|
||||
id,
|
||||
role,
|
||||
tabIndex,
|
||||
type,
|
||||
disabled,
|
||||
exit,
|
||||
translateX,
|
||||
translateY,
|
||||
translate,
|
||||
cursor,
|
||||
fontSize,
|
||||
weight,
|
||||
fontWeight,
|
||||
weight,
|
||||
letterSpacing,
|
||||
lineHeight,
|
||||
font,
|
||||
@@ -313,13 +310,9 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
|
||||
step,
|
||||
value,
|
||||
onChange,
|
||||
onError,
|
||||
placeholder,
|
||||
title,
|
||||
padding,
|
||||
paddingLeft,
|
||||
paddingRight,
|
||||
paddingTop,
|
||||
paddingBottom,
|
||||
size,
|
||||
accept,
|
||||
autoPlay,
|
||||
@@ -327,8 +320,36 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
|
||||
muted,
|
||||
playsInline,
|
||||
objectFit,
|
||||
type,
|
||||
checked,
|
||||
disabled,
|
||||
onSubmit,
|
||||
onBlur,
|
||||
onKeyDown,
|
||||
onMouseDown,
|
||||
onMouseUp,
|
||||
onMouseMove,
|
||||
onScroll,
|
||||
responsiveColSpan,
|
||||
responsiveGridCols,
|
||||
clickable,
|
||||
hoverScale,
|
||||
hoverBorderColor,
|
||||
hoverTextColor,
|
||||
groupHoverScale,
|
||||
groupHoverTextColor,
|
||||
shadow,
|
||||
transform,
|
||||
lineClamp,
|
||||
fill,
|
||||
viewBox,
|
||||
stroke,
|
||||
strokeWidth,
|
||||
backgroundSize,
|
||||
backgroundPosition,
|
||||
backgroundImage,
|
||||
...props
|
||||
}: BoxProps<T> & ComponentPropsWithoutRef<T>,
|
||||
}: BoxProps<T>,
|
||||
ref: ForwardedRef<HTMLElement>
|
||||
) => {
|
||||
const Tag = (as as ElementType) || 'div';
|
||||
@@ -371,22 +392,22 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
|
||||
};
|
||||
|
||||
const classes = [
|
||||
getSpacingClass('m', m),
|
||||
getSpacingClass('mt', mt),
|
||||
getSpacingClass('mb', mb),
|
||||
getSpacingClass('ml', ml),
|
||||
getSpacingClass('mr', mr),
|
||||
getSpacingClass('mx', mx),
|
||||
getSpacingClass('my', my),
|
||||
getSpacingClass('p', p || padding),
|
||||
getSpacingClass('pt', pt || paddingTop),
|
||||
getSpacingClass('pb', pb || paddingBottom),
|
||||
getSpacingClass('pl', pl || paddingLeft),
|
||||
getSpacingClass('pr', pr || paddingRight),
|
||||
getSpacingClass('px', px),
|
||||
getSpacingClass('py', py),
|
||||
fullWidth ? 'w-full' : getResponsiveClasses('w', w),
|
||||
fullHeight ? 'h-full' : getResponsiveClasses('h', h),
|
||||
getSpacingClass('m', margin || m),
|
||||
getSpacingClass('mt', marginTop || mt),
|
||||
getSpacingClass('mb', marginBottom || mb),
|
||||
getSpacingClass('ml', marginLeft || ml),
|
||||
getSpacingClass('mr', marginRight || mr),
|
||||
getSpacingClass('mx', marginX || mx),
|
||||
getSpacingClass('my', marginY || my),
|
||||
getSpacingClass('p', padding || p),
|
||||
getSpacingClass('pt', paddingTop || pt),
|
||||
getSpacingClass('pb', paddingBottom || pb),
|
||||
getSpacingClass('pl', paddingLeft || pl),
|
||||
getSpacingClass('pr', paddingRight || pr),
|
||||
getSpacingClass('px', paddingX || px),
|
||||
getSpacingClass('py', paddingY || py),
|
||||
fullWidth ? 'w-full' : getResponsiveClasses('w', width || w),
|
||||
fullHeight ? 'h-full' : getResponsiveClasses('h', height || h),
|
||||
getResponsiveClasses('max-w', maxWidth),
|
||||
getResponsiveClasses('min-w', minWidth),
|
||||
getResponsiveClasses('max-h', maxHeight),
|
||||
@@ -407,23 +428,6 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
|
||||
insetY !== undefined ? `inset-y-${insetY}` : '',
|
||||
insetX !== undefined ? `inset-x-${insetX}` : '',
|
||||
zIndex !== undefined ? `z-${zIndex}` : '',
|
||||
rounded === true ? 'rounded' : (rounded === false ? 'rounded-none' : (typeof rounded === 'string' ? (rounded.includes('-') ? rounded : `rounded-${rounded}`) : '')),
|
||||
border === true ? 'border' : (typeof border === 'string' ? (border === 'none' ? 'border-none' : border) : ''),
|
||||
borderTop === true ? 'border-t' : (typeof borderTop === 'string' ? borderTop : ''),
|
||||
borderBottom === true ? 'border-b' : (typeof borderBottom === 'string' ? borderBottom : ''),
|
||||
borderLeft === true ? 'border-l' : (typeof borderLeft === 'string' ? borderLeft : ''),
|
||||
borderRight === true ? 'border-r' : (typeof borderRight === 'string' ? borderRight : ''),
|
||||
borderStyle ? `border-${borderStyle}` : '',
|
||||
borderColor ? borderColor : '',
|
||||
borderOpacity !== undefined ? `border-opacity-${borderOpacity * 100}` : '',
|
||||
bg ? bg : '',
|
||||
backgroundColor ? backgroundColor : '',
|
||||
bgOpacity !== undefined ? `bg-opacity-${bgOpacity * 100}` : '',
|
||||
color ? color : '',
|
||||
shadow ? shadow : '',
|
||||
opacity !== undefined ? `opacity-${opacity * 100}` : '',
|
||||
blur ? (blur === 'none' ? 'blur-none' : `blur-${blur}`) : '',
|
||||
pointerEvents ? `pointer-events-${pointerEvents}` : '',
|
||||
flex !== undefined ? `flex-${flex}` : '',
|
||||
flexShrink !== undefined ? `flex-shrink-${flexShrink}` : '',
|
||||
flexGrow !== undefined ? `flex-grow-${flexGrow}` : '',
|
||||
@@ -436,21 +440,14 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
|
||||
getResponsiveClasses('grid-cols', gridCols || responsiveGridCols),
|
||||
getResponsiveClasses('col-span', colSpan || responsiveColSpan),
|
||||
getResponsiveClasses('order', order),
|
||||
getResponsiveClasses('text', fontSize),
|
||||
group ? 'group' : '',
|
||||
groupHoverTextColor ? `group-hover:text-${groupHoverTextColor}` : '',
|
||||
groupHoverScale ? 'group-hover:scale-105 transition-transform' : '',
|
||||
groupHoverOpacity !== undefined ? `group-hover:opacity-${groupHoverOpacity * 100}` : '',
|
||||
groupHoverBorderColor ? `group-hover:border-${groupHoverBorderColor}` : '',
|
||||
hoverBorderColor ? `hover:border-${hoverBorderColor}` : '',
|
||||
hoverBg ? `hover:bg-${hoverBg}` : '',
|
||||
hoverTextColor ? `hover:text-${hoverTextColor}` : '',
|
||||
hoverScale === true ? 'hover:scale-105 transition-transform' : (typeof hoverScale === 'number' ? `hover:scale-${hoverScale} transition-transform` : ''),
|
||||
clickable ? 'cursor-pointer active:opacity-80 transition-all' : '',
|
||||
ring ? `ring-${ring}` : '',
|
||||
animate === 'spin' ? 'animate-spin' : (animate === 'pulse' ? 'animate-pulse' : ''),
|
||||
blur ? `blur-${blur}` : '',
|
||||
pointerEvents ? `pointer-events-${pointerEvents}` : '',
|
||||
hideScrollbar ? 'scrollbar-hide' : '',
|
||||
truncate ? 'truncate' : '',
|
||||
transform === true ? 'transform' : (transform === false ? 'transform-none' : ''),
|
||||
clickable ? 'cursor-pointer' : '',
|
||||
lineClamp ? `line-clamp-${lineClamp}` : '',
|
||||
className
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
@@ -466,23 +463,27 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
|
||||
...(typeof right === 'string' || typeof right === 'number' ? { right } : {}),
|
||||
...(typeof bottom === 'string' || typeof bottom === 'number' ? { bottom } : {}),
|
||||
...(typeof left === 'string' || typeof left === 'number' ? { left } : {}),
|
||||
...(borderWidth !== undefined ? { borderWidth } : {}),
|
||||
...(typeof transform === 'string' ? { transform } : {}),
|
||||
...(translate ? { translate } : {}),
|
||||
...(translateX ? { transform: `translateX(${translateX})` } : {}),
|
||||
...(translateY ? { transform: `translateY(${translateY})` } : {}),
|
||||
...(cursor ? { cursor } : {}),
|
||||
...(fontSize && typeof fontSize === 'string' && !fontSize.includes(':') ? { fontSize } : {}),
|
||||
...(weight ? { fontWeight: weight } : {}),
|
||||
...(typeof borderTop === 'string' ? { borderTop } : (borderTop === true ? { borderTop: '1px solid var(--ui-color-border-default)' } : {})),
|
||||
...(typeof borderBottom === 'string' ? { borderBottom } : (borderBottom === true ? { borderBottom: '1px solid var(--ui-color-border-default)' } : {})),
|
||||
...(typeof borderLeft === 'string' ? { borderLeft } : (borderLeft === true ? { borderLeft: '1px solid var(--ui-color-border-default)' } : {})),
|
||||
...(typeof borderRight === 'string' ? { borderRight } : (borderRight === true ? { borderRight: '1px solid var(--ui-color-border-default)' } : {})),
|
||||
...(bg ? { background: bg.startsWith('bg-') ? undefined : bg } : {}),
|
||||
...(rounded === true ? { borderRadius: 'var(--ui-radius-md)' } : (typeof rounded === 'string' ? { borderRadius: rounded.includes('rem') || rounded.includes('px') ? rounded : `var(--ui-radius-${rounded})` } : {})),
|
||||
...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
|
||||
...(border === true ? { border: '1px solid var(--ui-color-border-default)' } : (typeof border === 'string' ? { border } : {})),
|
||||
...(color ? { color: color.startsWith('text-') ? undefined : color } : {}),
|
||||
...(opacity !== undefined ? { opacity } : {}),
|
||||
...(fontSize ? (typeof fontSize === 'string' ? { fontSize } : {}) : {}),
|
||||
...(fontWeight ? { fontWeight } : {}),
|
||||
...(letterSpacing ? { letterSpacing } : {}),
|
||||
...(lineHeight ? { lineHeight } : {}),
|
||||
...(font ? { fontFamily: font } : {}),
|
||||
...(typeof size === 'string' || typeof size === 'number' ? { width: size, height: size } : {}),
|
||||
...(backgroundImage ? { backgroundImage } : {}),
|
||||
...(weight ? { fontWeight: weight } : {}),
|
||||
...(shadow ? { boxShadow: shadow.startsWith('shadow-') ? undefined : shadow } : {}),
|
||||
...(transform === true ? { transform: 'auto' } : (typeof transform === 'string' ? { transform } : {})),
|
||||
...(typeof fill === 'string' ? { fill } : (fill === true ? { fill: 'currentColor' } : {})),
|
||||
...(stroke ? { stroke } : {}),
|
||||
...(strokeWidth ? { strokeWidth } : {}),
|
||||
...(backgroundSize ? { backgroundSize } : {}),
|
||||
...(backgroundPosition ? { backgroundPosition } : {}),
|
||||
...(objectFit ? { objectFit } : {}),
|
||||
...(backgroundImage ? { backgroundImage } : {}),
|
||||
...(styleProp || {})
|
||||
};
|
||||
|
||||
@@ -491,24 +492,24 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
|
||||
ref={ref as React.ForwardedRef<HTMLElement>}
|
||||
className={classes}
|
||||
onClick={onClick}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onMouseDown={onMouseDown}
|
||||
onMouseUp={onMouseUp}
|
||||
onMouseMove={onMouseMove}
|
||||
onKeyDown={onKeyDown}
|
||||
onBlur={onBlur}
|
||||
onSubmit={onSubmit}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onScroll={onScroll}
|
||||
style={style}
|
||||
onError={onError}
|
||||
style={Object.keys(style).length > 0 ? style : undefined}
|
||||
id={id}
|
||||
role={role}
|
||||
tabIndex={tabIndex}
|
||||
type={type}
|
||||
disabled={disabled}
|
||||
src={src}
|
||||
alt={alt}
|
||||
draggable={draggable}
|
||||
draggable={draggable as any}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
@@ -520,6 +521,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
|
||||
loop={loop}
|
||||
muted={muted}
|
||||
playsInline={playsInline}
|
||||
viewBox={viewBox}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user