Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@stoplight/mosaic

Package Overview
Dependencies
Maintainers
1
Versions
193
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@stoplight/mosaic - npm Package Compare versions

Comparing version 1.19.1 to 1.20.0

hooks/use-image.d.ts

112

components/Avatar/Avatar.d.ts
import * as React from 'react';
import { CSSProperties } from 'react';
import { IMarginProps } from '../../enhancers';
import { BorderProps, IMarginProps } from '../../enhancers';
import { IIconProps } from '../Icon';
declare type BaseAvatarProps = IMarginProps & {
size?: 'sm' | 'md' | 'lg';
export declare type AvatarProps = IMarginProps & Pick<BorderProps, 'border' | 'borderColor'> & {
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
className?: string;
/**
* Optional background color.
*
* - If `fg` is set then `bg` defaults to a lighter shade of `fg`
* - If `fg` is not set and `name` is set, then `bg` defaults to a random color that is generated based on the `name` value.
*/
bg?: CSSProperties['backgroundColor'];
/**
* Optional foreground color.
*/
fg?: CSSProperties['color'];
/**
* The name of the entity in the avatar.
*
* - if `src` is also set, the name will be used in the `alt` attribute of the image.
* - If `src` is not set, the name will be used to create the initials
*/
name?: string;
/**
* @deprecated Use `name` instead.
*/
letter?: string;
/**
* The image url of the `Avatar`
*/
src?: string;
/**
* The icon to use in the `Avatar`.
*/
icon?: IIconProps['icon'];
/**
* @deprecated Omit `name`, `src`, and `icon` to get equivalent "blank/spacer" avatar.
*/
blank?: true;
/**
* Optionally force an inverted icon.
*
* `isInverted` defaults to true when an avatar is rendered in dark mode context.
*/
isInverted?: boolean;
/**
* Do not set a title or alt attribute. Useful if handling this another way, for example with a wrapping tooltip.
*/
noTitleAlt?: boolean;
};
export declare type ImageAvatarProps = BaseAvatarProps & {
imageUrl: string;
};
export declare type IconAvatarProps = BaseAvatarProps & {
icon: IIconProps['icon'];
};
export declare type LetterAvatarProps = BaseAvatarProps & {
letter: string;
};
export declare type BlankAvatarProps = BaseAvatarProps & {
blank: true;
};
export declare type AvatarProps = ImageAvatarProps | IconAvatarProps | LetterAvatarProps | BlankAvatarProps;
export declare const Avatar: React.MemoExoticComponent<React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>>;
export {};
export declare const Avatar: React.MemoExoticComponent<React.ForwardRefExoticComponent<IMarginProps & Pick<BorderProps, "border" | "borderColor"> & {
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
className?: string;
/**
* Optional background color.
*
* - If `fg` is set then `bg` defaults to a lighter shade of `fg`
* - If `fg` is not set and `name` is set, then `bg` defaults to a random color that is generated based on the `name` value.
*/
bg?: CSSProperties['backgroundColor'];
/**
* Optional foreground color.
*/
fg?: CSSProperties['color'];
/**
* The name of the entity in the avatar.
*
* - if `src` is also set, the name will be used in the `alt` attribute of the image.
* - If `src` is not set, the name will be used to create the initials
*/
name?: string;
/**
* @deprecated Use `name` instead.
*/
letter?: string;
/**
* The image url of the `Avatar`
*/
src?: string;
/**
* The icon to use in the `Avatar`.
*/
icon?: IIconProps['icon'];
/**
* @deprecated Omit `name`, `src`, and `icon` to get equivalent "blank/spacer" avatar.
*/
blank?: true;
/**
* Optionally force an inverted icon.
*
* `isInverted` defaults to true when an avatar is rendered in dark mode context.
*/
isInverted?: boolean;
/**
* Do not set a title or alt attribute. Useful if handling this another way, for example with a wrapping tooltip.
*/
noTitleAlt?: boolean;
} & React.RefAttributes<HTMLDivElement>>>;

4

enhancers/spacing.d.ts
import { EnhancerFn } from './types';
export declare type SpaceVals = 'auto' | 'px' | 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 32 | 40 | 60 | 80;
export declare type NegativeSpaceVals = '-px' | -0 | -0.5 | -1 | -1.5 | -2 | -2.5 | -3 | -3.5 | -4 | -5 | -6 | -7 | -8 | -9 | -10 | -11 | -12 | -14 | -16 | -20 | -24 | -32 | -40 | -60 | -80;
export declare type SpaceVals = 'auto' | 'px' | 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 32 | 40 | 60 | 80;
export declare type NegativeSpaceVals = '-px' | -0 | -0.5 | -1 | -1.5 | -2 | -2.5 | -3 | -3.5 | -4 | -4.5 | -5 | -6 | -7 | -8 | -9 | -10 | -11 | -12 | -14 | -16 | -20 | -24 | -32 | -40 | -60 | -80;
export interface IMarginProps {

@@ -5,0 +5,0 @@ m?: SpaceVals | NegativeSpaceVals;

{
"name": "@stoplight/mosaic",
"version": "1.19.1",
"version": "1.20.0",
"sideEffects": false,

@@ -19,2 +19,3 @@ "license": "Apache-2.0",

"clsx": "^1.1.1",
"react-fast-compare": "^3.2.0",
"@fortawesome/fontawesome-svg-core": "^1.2.35",

@@ -29,3 +30,2 @@ "@fortawesome/free-solid-svg-icons": "^5.15.3",

"nano-memoize": "^1.2.1",
"react-fast-compare": "^3.2.0",
"copy-to-clipboard": "^3.3.1",

@@ -32,0 +32,0 @@ "dom-helpers": "^3.3.1",

@@ -10,1 +10,8 @@ export declare type HslColor2 = {

export declare const stringifyHsl: (hsl: HslColor2) => string;
export declare const randomColorFromString: (str: string) => string;
/**
* Returns white or black, based on which provides higher contrast when rendered on top of the passed in `color`.
* @param color - the color in hex, rgb, or hsl
* @param leeway - integer from -10 to 10. The more positive the number, the more that white will be weighted. Defaults to 0.
*/
export declare const readableColor: (color: string, leeway?: number) => "#000" | "#fff";

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc