@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"name": "@tesseract-design/web-action-react", | "name": "@tesseract-design/web-action-react", | ||||
"version": "0.1.0", | |||||
"version": "0.2.0", | |||||
"files": [ | "files": [ | ||||
"dist", | "dist", | ||||
"src" | "src" | ||||
@@ -87,10 +87,11 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB | |||||
type={type} | type={type} | ||||
ref={forwardedRef} | ref={forwardedRef} | ||||
className={tw( | className={tw( | ||||
'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none', | |||||
'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none relative', | |||||
'focus:outline-0 focus:ring-4', | 'focus:outline-0 focus:ring-4', | ||||
'active:ring-tertiary/50', | 'active:ring-tertiary/50', | ||||
'disabled:opacity-50 disabled:cursor-not-allowed', | 'disabled:opacity-50 disabled:cursor-not-allowed', | ||||
'text-primary focus:text-secondary active:text-tertiary', | |||||
{ | { | ||||
'flex w-full': block, | 'flex w-full': block, | ||||
'inline-flex max-w-full align-middle': !block, | 'inline-flex max-w-full align-middle': !block, | ||||
@@ -102,9 +103,7 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB | |||||
'pr-2': compact || menuItem, | 'pr-2': compact || menuItem, | ||||
}, | }, | ||||
{ | { | ||||
'border-2 border-primary focus:border-secondary active:border-tertiary disabled:border-primary': variant !== 'bare', | |||||
'bg-negative text-primary focus:text-secondary active:text-tertiary disabled:text-primary': variant !== 'filled', | |||||
'bg-primary text-negative focus:bg-secondary active:bg-tertiary focus:text-negative active:text-negative disabled:bg-primary': variant === 'filled', | |||||
'bg-current': variant === 'filled', | |||||
}, | }, | ||||
{ | { | ||||
'h-10': size === 'small', | 'h-10': size === 'small', | ||||
@@ -117,8 +116,9 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB | |||||
<span | <span | ||||
data-testid="childrenParent" | data-testid="childrenParent" | ||||
className={tw( | className={tw( | ||||
'flex-auto min-w-0 flex items-center gap-2', | |||||
'flex-auto min-w-0 flex items-center gap-2 relative', | |||||
iconAfterChildren ? 'flex-row-reverse' : 'flex-row', | iconAfterChildren ? 'flex-row-reverse' : 'flex-row', | ||||
variant === 'filled' && 'text-negative', | |||||
)} | )} | ||||
> | > | ||||
{icon && ( | {icon && ( | ||||
@@ -171,6 +171,10 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB | |||||
</span> | </span> | ||||
<span | <span | ||||
data-testid="badge" | data-testid="badge" | ||||
className={tw( | |||||
'relative', | |||||
variant === 'filled' && 'text-negative', | |||||
)} | |||||
> | > | ||||
{badge} | {badge} | ||||
</span> | </span> | ||||
@@ -179,6 +183,10 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB | |||||
{menuItem && ( | {menuItem && ( | ||||
<span | <span | ||||
data-testid="menuItemIndicator" | data-testid="menuItemIndicator" | ||||
className={tw( | |||||
'relative', | |||||
variant === 'filled' && 'text-negative', | |||||
)} | |||||
> | > | ||||
<svg | <svg | ||||
className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round" | className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round" | ||||
@@ -189,6 +197,14 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB | |||||
</svg> | </svg> | ||||
</span> | </span> | ||||
)} | )} | ||||
{ | |||||
variant !== 'bare' | |||||
&& ( | |||||
<span | |||||
className="border-current border-2 rounded-inherit absolute w-full h-full top-0 left-0" | |||||
/> | |||||
) | |||||
} | |||||
</ActionButtonDerivedElementComponent> | </ActionButtonDerivedElementComponent> | ||||
)); | )); | ||||
@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"name": "@tesseract-design/web-blob-react", | "name": "@tesseract-design/web-blob-react", | ||||
"version": "0.1.0", | |||||
"version": "0.2.0", | |||||
"files": [ | "files": [ | ||||
"dist", | "dist", | ||||
"src" | "src" | ||||
@@ -188,7 +188,7 @@ export interface FileSelectBoxProps< | |||||
/** | /** | ||||
* Should the component resize vertically? | * Should the component resize vertically? | ||||
*/ | */ | ||||
resize?: boolean, | |||||
resizable?: boolean, | |||||
} | } | ||||
const isButtonElement = (el: HTMLElement): el is FileSelectBoxActionElement => el.tagName === 'BUTTON'; | const isButtonElement = (el: HTMLElement): el is FileSelectBoxActionElement => el.tagName === 'BUTTON'; | ||||
@@ -234,7 +234,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS | |||||
reselectLabel = 'Reselect' as const, | reselectLabel = 'Reselect' as const, | ||||
clearLabel = 'Clear' as const, | clearLabel = 'Clear' as const, | ||||
onPaste, | onPaste, | ||||
resize = false as const, | |||||
resizable = false as const, | |||||
...etcProps | ...etcProps | ||||
}, | }, | ||||
forwardedRef, | forwardedRef, | ||||
@@ -445,7 +445,7 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS | |||||
{ | { | ||||
'h-4': clientSide, | 'h-4': clientSide, | ||||
'h-16': !clientSide, | 'h-16': !clientSide, | ||||
'resize-y': resize, | |||||
'resize-y': resizable, | |||||
'pb-4': clientSide && filesCount > 0, | 'pb-4': clientSide && filesCount > 0, | ||||
}, | }, | ||||
)} | )} | ||||
@@ -651,7 +651,7 @@ FileSelectBox.defaultProps = { | |||||
previewComponent: FileSelectBoxDefaultPreviewComponent, | previewComponent: FileSelectBoxDefaultPreviewComponent, | ||||
reselectLabel: 'Reselect' as const, | reselectLabel: 'Reselect' as const, | ||||
clearLabel: 'Clear' as const, | clearLabel: 'Clear' as const, | ||||
resize: false as const, | |||||
resizable: false as const, | |||||
}; | }; | ||||
FileSelectBoxDefaultPreviewComponent.defaultProps = { | FileSelectBoxDefaultPreviewComponent.defaultProps = { | ||||
@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"name": "@tesseract-design/web-choice-react", | "name": "@tesseract-design/web-choice-react", | ||||
"version": "0.0.2", | |||||
"version": "0.2.0", | |||||
"files": [ | "files": [ | ||||
"dist", | "dist", | ||||
"src" | "src" | ||||
@@ -96,10 +96,11 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt | |||||
htmlFor={id} | htmlFor={id} | ||||
data-testid="button" | data-testid="button" | ||||
className={tw( | className={tw( | ||||
'items-center justify-start rounded overflow-hidden ring-secondary/50 leading-none select-none cursor-pointer', | |||||
'items-center justify-start rounded overflow-hidden ring-secondary/50 leading-none select-none cursor-pointer relative', | |||||
'peer-focus:outline-0 peer-focus:ring-4 peer-focus:ring-secondary/50', | 'peer-focus:outline-0 peer-focus:ring-4 peer-focus:ring-secondary/50', | ||||
'active:ring-tertiary/50 active:ring-4', | 'active:ring-tertiary/50 active:ring-4', | ||||
'peer-disabled:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:ring-0', | 'peer-disabled:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:ring-0', | ||||
'text-primary focus:text-secondary active:text-tertiary', | |||||
{ | { | ||||
'flex w-full': block, | 'flex w-full': block, | ||||
'inline-flex max-w-full align-middle': !block, | 'inline-flex max-w-full align-middle': !block, | ||||
@@ -108,9 +109,11 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt | |||||
'pl-2 gap-2 pr-2': compact, | 'pl-2 gap-2 pr-2': compact, | ||||
'pl-4 gap-4 pr-4': !compact, | 'pl-4 gap-4 pr-4': !compact, | ||||
}, | }, | ||||
{ | |||||
'bg-current': variant === 'filled', | |||||
}, | |||||
{ | { | ||||
'border-2 border-primary peer-disabled:border-primary peer-focus:border-secondary peer-checked:border-tertiary active:border-tertiary': variant !== 'bare', | |||||
'bg-negative text-primary peer-disabled:text-primary peer-focus:text-secondary peer-checked:text-tertiary active:text-tertiary': variant !== 'filled', | |||||
'text-primary peer-disabled:text-primary peer-focus:text-secondary peer-checked:text-tertiary active:text-tertiary': variant !== 'filled', | |||||
'bg-primary text-negative peer-disabled:bg-primary peer-focus:bg-secondary peer-checked:bg-tertiary active:bg-tertiary': variant === 'filled', | 'bg-primary text-negative peer-disabled:bg-primary peer-focus:bg-secondary peer-checked:bg-tertiary active:bg-tertiary': variant === 'filled', | ||||
}, | }, | ||||
{ | { | ||||
@@ -187,6 +190,14 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt | |||||
</> | </> | ||||
)} | )} | ||||
</span> | </span> | ||||
{ | |||||
variant !== 'bare' | |||||
&& ( | |||||
<span | |||||
className="border-current border-2 rounded-inherit absolute w-full h-full top-0 left-0" | |||||
/> | |||||
) | |||||
} | |||||
</label> | </label> | ||||
</span> | </span> | ||||
); | ); | ||||
@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"name": "@tesseract-design/web-color-react", | "name": "@tesseract-design/web-color-react", | ||||
"version": "0.1.0", | |||||
"version": "0.2.0", | |||||
"files": [ | "files": [ | ||||
"dist", | "dist", | ||||
"src" | "src" | ||||
@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"name": "@tesseract-design/web-formatted-react", | "name": "@tesseract-design/web-formatted-react", | ||||
"version": "0.1.0", | |||||
"version": "0.2.0", | |||||
"files": [ | "files": [ | ||||
"dist", | "dist", | ||||
"src" | "src" | ||||
@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"name": "@tesseract-design/web-freeform-react", | "name": "@tesseract-design/web-freeform-react", | ||||
"version": "0.1.0", | |||||
"version": "0.2.0", | |||||
"files": [ | "files": [ | ||||
"dist", | "dist", | ||||
"src" | "src" | ||||
@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"name": "@tesseract-design/web-information-react", | "name": "@tesseract-design/web-information-react", | ||||
"version": "0.1.0", | |||||
"version": "0.2.0", | |||||
"files": [ | "files": [ | ||||
"dist", | "dist", | ||||
"src" | "src" | ||||
@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"name": "@tesseract-design/web-multichoice-react", | "name": "@tesseract-design/web-multichoice-react", | ||||
"version": "0.1.0", | |||||
"version": "0.2.0", | |||||
"files": [ | "files": [ | ||||
"dist", | "dist", | ||||
"src" | "src" | ||||
@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"name": "@tesseract-design/web-navigation-react", | "name": "@tesseract-design/web-navigation-react", | ||||
"version": "0.1.0", | |||||
"version": "0.2.0", | |||||
"files": [ | "files": [ | ||||
"dist", | "dist", | ||||
"src" | "src" | ||||
@@ -119,41 +119,41 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP | |||||
href={disabled ? undefined : href as string} | href={disabled ? undefined : href as string} | ||||
type={disabled ? 'button' : undefined} | type={disabled ? 'button' : undefined} | ||||
ref={forwardedRef} | ref={forwardedRef} | ||||
className={tw( | |||||
'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none no-underline m-0', | |||||
'focus:outline-0 focus:ring-4', | |||||
'active:ring-tertiary/50', | |||||
'disabled:opacity-50 disabled:cursor-not-allowed', | |||||
{ | |||||
'flex w-full': block, | |||||
'inline-flex max-w-full align-middle': !block, | |||||
}, | |||||
{ | |||||
'pl-2 gap-2': compact, | |||||
'pl-4 gap-4': !compact, | |||||
'pr-4': !(compact || menuItem), | |||||
'pr-2': compact || menuItem, | |||||
}, | |||||
{ | |||||
'border-2 border-primary focus:border-secondary active:border-tertiary disabled:border-primary': variant !== 'bare', | |||||
'bg-negative text-primary focus:text-secondary active:text-tertiary disabled:text-primary': variant !== 'filled', | |||||
'bg-primary text-negative focus:bg-secondary active:bg-tertiary focus:text-negative active:text-negative disabled:bg-primary': variant === 'filled', | |||||
}, | |||||
{ | |||||
'h-10': size === 'small', | |||||
'h-12': size === 'medium', | |||||
'h-16': size === 'large', | |||||
}, | |||||
className, | |||||
)} | |||||
className={tw( | |||||
'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none relative', | |||||
'focus:outline-0 focus:ring-4', | |||||
'active:ring-tertiary/50', | |||||
'disabled:opacity-50 disabled:cursor-not-allowed', | |||||
'text-primary focus:text-secondary active:text-tertiary', | |||||
{ | |||||
'flex w-full': block, | |||||
'inline-flex max-w-full align-middle': !block, | |||||
}, | |||||
{ | |||||
'pl-2 gap-2': compact, | |||||
'pl-4 gap-4': !compact, | |||||
'pr-4': !(compact || menuItem), | |||||
'pr-2': compact || menuItem, | |||||
}, | |||||
{ | |||||
'bg-current': variant === 'filled', | |||||
}, | |||||
{ | |||||
'h-10': size === 'small', | |||||
'h-12': size === 'medium', | |||||
'h-16': size === 'large', | |||||
}, | |||||
className, | |||||
)} | |||||
data-testid="link" | data-testid="link" | ||||
style={style} | style={style} | ||||
> | > | ||||
<span | <span | ||||
data-testid="childrenParent" | data-testid="childrenParent" | ||||
className={tw( | className={tw( | ||||
'flex-auto min-w-0 flex items-center gap-2', | |||||
'flex-auto min-w-0 flex items-center gap-2 relative', | |||||
iconAfterChildren ? 'flex-row-reverse' : 'flex-row', | iconAfterChildren ? 'flex-row-reverse' : 'flex-row', | ||||
variant === 'filled' && 'text-negative', | |||||
)} | )} | ||||
> | > | ||||
{icon && ( | {icon && ( | ||||
@@ -206,6 +206,10 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP | |||||
</span> | </span> | ||||
<span | <span | ||||
data-testid="badge" | data-testid="badge" | ||||
className={tw( | |||||
'relative', | |||||
variant === 'filled' && 'text-negative', | |||||
)} | |||||
> | > | ||||
{badge} | {badge} | ||||
</span> | </span> | ||||
@@ -214,6 +218,10 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP | |||||
{menuItem && ( | {menuItem && ( | ||||
<span | <span | ||||
data-testid="menuItemIndicator" | data-testid="menuItemIndicator" | ||||
className={tw( | |||||
'relative', | |||||
variant === 'filled' && 'text-negative', | |||||
)} | |||||
> | > | ||||
<svg | <svg | ||||
className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round" | className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round" | ||||
@@ -224,6 +232,14 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP | |||||
</svg> | </svg> | ||||
</span> | </span> | ||||
)} | )} | ||||
{ | |||||
variant !== 'bare' | |||||
&& ( | |||||
<span | |||||
className="border-current border-2 rounded-inherit absolute w-full h-full top-0 left-0" | |||||
/> | |||||
) | |||||
} | |||||
</Component> | </Component> | ||||
); | ); | ||||
}); | }); | ||||
@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"name": "@tesseract-design/web-number-react", | "name": "@tesseract-design/web-number-react", | ||||
"version": "0.1.0", | |||||
"version": "0.2.0", | |||||
"files": [ | "files": [ | ||||
"dist", | "dist", | ||||
"src" | "src" | ||||
@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"name": "@tesseract-design/web-temporal-react", | "name": "@tesseract-design/web-temporal-react", | ||||
"version": "0.1.0", | |||||
"version": "0.2.0", | |||||
"files": [ | "files": [ | ||||
"dist", | "dist", | ||||
"src" | "src" | ||||